親要素に「position: relative;」を定義して、
子要素に「position: absolute;」を定義する。
section3は高さを指定しなくいても子要素がTEXTなので高さが確保されるが、
section2のような子要素が<div>などの要素になると親要素の高さは確保されないので注意（高さが可変になる場合考慮が必要）
HTML+CSS
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>サンプル</title>
<style type="text/css">
<!--
#main
{
width: 600;
margin: 10px auto 0px auto;
}
#section1
{
height: 80px;
border: 1px solid #ff0000; /* 赤 */
}
#section2
{
position: relative;
height: 100px;
border: 1px solid #00ff00; /* 緑 */
}
/* section2の子要素 */
#section2_sub1
{
position: absolute;
top: 20px;
left: 10px; /* 左基準 */
width: 100;
height: 30px;
background-color: #c0c0c0; /* 灰 */
}
/* section2の子要素 */
#section2_sub2
{
position: absolute;
top: 20px;
left: 115px; /* 左基準 */
width: 100;
height: 30px;
background-color: #ffff00; /* 黄 */
}
/* section2の子要素 */
#section2_sub3
{
position: absolute;
top: 60px;
right: 25px; /* 右基準 */
width: 100;
height: 30px;
background-color: #00ffff; /* 水色 */
}
#section3
{
border: 1px solid #0000ff; /* 青 */
text-align: center;
}
#section4
{
border: 1px solid #000000; /* 黒 */
text-align: center;
}
-->
</style>
</head>
<body >
<div id="main">
<div id="section1">section1</div>
<div id="section2">
<div>section2</div>
<div id="section2_sub1">section2_sub1</div>
<div id="section2_sub2">section2_sub2</div>
<div id="section2_sub3">section2_sub3</div>
</div>
<div id="section3">section3</br>section3</div>
<div id="section4">section4</div>
</div>
</body>
</html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>サンプル</title>
<style type="text/css">
<!--
#main
{
width: 600;
margin: 10px auto 0px auto;
}
#section1
{
height: 80px;
border: 1px solid #ff0000; /* 赤 */
}
#section2
{
position: relative;
height: 100px;
border: 1px solid #00ff00; /* 緑 */
}
/* section2の子要素 */
#section2_sub1
{
position: absolute;
top: 20px;
left: 10px; /* 左基準 */
width: 100;
height: 30px;
background-color: #c0c0c0; /* 灰 */
}
/* section2の子要素 */
#section2_sub2
{
position: absolute;
top: 20px;
left: 115px; /* 左基準 */
width: 100;
height: 30px;
background-color: #ffff00; /* 黄 */
}
/* section2の子要素 */
#section2_sub3
{
position: absolute;
top: 60px;
right: 25px; /* 右基準 */
width: 100;
height: 30px;
background-color: #00ffff; /* 水色 */
}
#section3
{
border: 1px solid #0000ff; /* 青 */
text-align: center;
}
#section4
{
border: 1px solid #000000; /* 黒 */
text-align: center;
}
-->
</style>
</head>
<body >
<div id="main">
<div id="section1">section1</div>
<div id="section2">
<div>section2</div>
<div id="section2_sub1">section2_sub1</div>
<div id="section2_sub2">section2_sub2</div>
<div id="section2_sub3">section2_sub3</div>
</div>
<div id="section3">section3</br>section3</div>
<div id="section4">section4</div>
</div>
</body>
</html>
0 件のコメント:
コメントを投稿