31

画像付きの#sliderdivがあります。その後、#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>

CSS

#slider {
    position:absolute;
    left:0;
    height:400px;
}
#slider img {
    width:100%;
}

#content {
    position:relative;
}

#content #text {
    position:relative;
    width:950px;
    height:215px;
    color:red;
}

JSFIDDLE

4

2 に答える 2

23

#sliderasを設定しました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;
}

http://jsfiddle.net/uorgj4e1/

于 2013-10-12T19:41:07.850 に答える
0

position: relativeを#content #text div からposition: absoluteに変更するのはどうですか

#content #text {
   position:absolute;
   width:950px;
   height:215px;
   color:red;
}

http://jsfiddle.net/CaZY7/12/

次に、css プロパティのleftとtopを使用して #content div 内に配置できます

于 2013-10-12T19:36:06.513 に答える