#slider画像のある divがあります。その後に、#contentテキストのある div があります。試してみたposition:relativeところ、前の div の後に来るはずだと思うのですが、#sliderここではそのようにはなっていません。
ここでの問題は何でしょうか? それをどうやって克服するのでしょうか?
html
<div id="slider">
<img src="http://oi43.tinypic.com/25k319l.jpg"/>
</div>
<div id="content">
<div id="text">
sample text
</div>
</div>
CS
#slider {
position:absolute;
left:0;
height:400px;
}
#slider img {
width:100%;
}
#content {
position:relative;
}
#content #text {
position:relative;
width:950px;
height:215px;
color:red;
}
ベストアンサー1
#sliderを として設定しましたがabsolute、これは「最も近い位置にある祖先を基準にして配置される」ことを意味します (混乱しますよね?)。一方、#contentdiv は相対的に配置されており、これは「通常の位置を基準にして」という意味です。したがって、2 つの div の位置は関連していません。
CSSポジショニングについて読むことができますここ
両方を に設定するとrelative、次に示すように、div が次々に表示されます。
#slider {
position:relative;
left:0;
height:400px;
border-style:solid;
border-width:5px;
}
#slider img {
width:100%;
}
#content {
position:relative;
}
#content #text {
position:relative;
width:950px;
height:215px;
color:red;
}