Question

这可能是一个简单的问题。我有一个#slider div，后面有一个图像，我有#content div，它有文本。我已经尝试了相对位置，所以我认为它应该在之前的div之后我的意思是#slider，但这里不是那样的。

这里有什么问题。如何克服它？

HTML

<div id="slider">
<img src="http://oi43.tinypic.com/25k319l.jpg"  />
</div>
<div id="content">
<div id="text">
    samplle 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

Answer 1

由于您将#slider设置为absolute，因此内容div相对于滑块div放置。如果将两者都设置为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/CaZY7/18/

Answer 2

如何将 #content #text div上的位置：相对更改为位置：绝对

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

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

然后你可以使用css属性左和顶部来定位#content div

如何将div放在另一个div下面？

2 个答案: