Question

css 中如何让div不覆盖上面的div

.article{width:767px;height:600px;position:relative;}
.random{width:767px; position:relative;}
<div class="article">1111111</div>

<div class="random">6666666</div>
我把height:600px这个值去掉就不行了，下面这个div就浮在上面了，而且.
article的内容也现不全了，因为article是文章，内容高度不能确定，现在
写600px有时候很大一块空白。

Answer 1

z-index属性用于控制Div层的高低。数字越高越上面 CSS z-index 属性 CSS 参考手册定义和用法 z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。注释：元素可拥有负的 z-index 属性值。注释：Z-index 仅能在定位元素上奏效（例如 position:absolute;）！说明 该属性设置一个定位元素沿 z 轴的位置，z 轴定义为垂直延伸到显示区的轴。如果为正数，则离用户更近，为负数则表示离用户更远。默认值：auto继承性：no版本：CSS2JavaScript 语法：object.style.zIndex="1"实例 设置图像的 z-index：img { position:absolute; left:0px; top:0px; z-index:-1; } TIY浏览器支持 所有主流浏览器都支持 z-index 属性。注释：任何的版本的 Internet Explorer （包括 IE8）都不支持属性值 "inherit"。可能的值 值描述auto默认。堆叠顺序与父元素相等。number设置元素的堆叠顺序。inherit规定应该从父元素继承 z-index 属性的值。TIY 实例 Z-index Z-index 可用于将在一个元素放置于另一元素之后。 Z-index 上例中的元素已经更改了 Z-index。 相关页面 CSS 教程：CSS 定位HTML DOM 参考手册：zIndex 属性CSS 参考手册

Answer 2

你说的情况可能是因为你的class为article的div的子元素使用了flaot 浮动,浮动会让你的元素脱离文档流,那么他就撑不开父元素了...父元素也就不能自适应了,解决的方法比较多,但是浏览器兼容性较好的方法之一是在父元素的底部加上一行代码: , 目的就是为了清除元素的浮动.使父窗体能够自适应其内部元素的大小.

参照你的代码做了如下更改:

.article{width:767px;position:relative;}
.random{width:767px; position:relative;}

1111111

6666666

另外如果你的一个层盖住了另一个层,还有可能跟你的position 有关系,你要检查代码是否给相应元素指定了position 如果指定了还要检查你是否指定了 left, right, top, bottom 的值.

Answer 3

定位有问题#float1{ display:block; width:710px; height:45px; line-height:45px; font-weight:bold; border:1px solid #F00; margin-bottom:10px; position: fixed;_position: absolute;top:0; background-color:#F00;z-index:9}

Answer 4

楼主的写法太牛了 HOHO~~

Answer 5

建议把两个div的 position:relative 都去掉去掉 这个属性是相对定位 要是没特殊用意 最好不要用 它应该是你的div乱动的原因