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="width:302px;border:solid 1px #ff3000;">
<div id="left" style="float:left;width:100px;text-align:center;background-color:blue;">
文档<br />
文档<br />
文档<br />
文档<br />
文档
</div>
<div id="right" style="float:right; width:200px; text-align:center;background-color:yellow;">
文档<br />
文档<br />
文档<br />
文档<br />
文档<br />
标题<br />
标题
</div>
<div style="clear:both;"></div>
</div>
<div id="bottom" style="clear:both;">标题</div>
不知道你top的外层是什么结构，仅仅是你描述的效果，上面的代码就可以。position:absolute你最好还是看一下他的具体作用，你这样“无意中”的使用的话会产生很多意想不到的新问题最后可能会让你的排错更加困难。还有你说高度不固定是啥意思？你的页面不可能无止境的往下延伸吧，你可以定个高度然后在div的style里加个overflow-y:auto
这个问题的本质就是要搞清楚float到底做了什么，当你定义了float，这个元素就脱离了正常的流布局，对于外层的正常流中的元素来说这个元素就好像不存在一样(位置上的),所以top里面2个元素都定义成float后你的top就相当于一个空元素
http://www.w3school.com.cn/css/css_positioning_floating.asp这里有最完美的解答，看行框与浮动

Answer 2

Vue实践-CSS样式position/display/float属性对比使用

Answer 3

样式 position: absolute; 为绝对位置，与边框无关，计算宽度时要考虑border,padding,margin等因素。你这里top的有1px的边框，所以宽度300px就不够了，将宽度改为302px就可以了。
所以，top行应改为：
<div id="top" style="width:302px; border:solid 1px #eee;">

Answer 4

在绝对定位的DIV外面在加一个DIV来清除浮动，也就是<div style="clear:both;"></div>

Answer 5

<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 id="bottom" style="clear:both;">标题</div>
</div>

你放错位置了，不知道是不是要放里面的，边框也要算在大小里面的哦