Question

给DIV一个样式是:“position: absolute;”,那它下面的DIV就会跑到上面,如何解决?

我写了一个事例，代码如下：
<div id="top" style="width:300px; border:solid 1px #eee; position: absolute;">
<div id="left" style="float:left; width:100px; text-align:center;">
文档<br />
文档<br />
文档<br />
文档<br />
文档
</div>
<div id="right" style="float:right; width:200px; text-align:center;">
文档<br />
文档<br />
文档<br />
文档<br />
文档<br />
标题<br />
标题
</div>
</div>
<div id="bottom" style="clear:both;">标题</div>

其实我最初的问题是id为top的那个div有一个边框，但是里面的内容是一左一右的（样式分别为：float:left与float:right;）那样这个边框就不能框住左右两边的内容，我无意中发现给id="top"的DIV写一个样式(position: absolute;)之后，边框就出来了（能框住左右两边的内容）。但是呢，id="bottom"的DIV就会跑到上面去。是不是我的方法不对？求解。
注意：id为top、left、right的高度都不能固定（这里的数据不固定）。

Answer 1

<div id="top" style="border:solid 1px #eee; width:300px; ">
<div id="right" style="float:right; width:200px; text-align:center; ">
文档<br />
文档<br />
文档<br />
文档<br />
文档<br />
标题<br />
标题
</div>
<div id="left" style=" width:100px; text-align:center;">
文档<br />
文档<br />
文档<br />
文档<br />
文档
</div>
</div>
<div id="bottom" style="clear:both;">标题</div>

Answer 2

写的好乱 试试这个z-index :1;

Answer 3

框不住，是因为id为top的div，高度没有自动撑开。（凡是用了float属性的标签，它的父元素高度都不会自动撑开。）

解决办法：

一、清除浮动。 你那个clear:both位置没放对地方：要往上移一行，要写在id=top的div内、紧跟在用了float属性的标签后面。

二、给父元素增加自动撑开的样式：给id=top  增加样式overflow：hidden或overflow：auto都可以让它自动撑开高度。

三、写死父元素高度，用css给id=top的div 固定高度。

另外，只是添加样式的话，要用class="top"这种，不用随便用id命名。id一般是给js用的