Question

怎么用一个DIV 完全覆盖在另一个DIV之上？

有点像百度提问里面这个一样

不过DIV1没有确定高度，完全是由一此子元素撑起来的，现在就要用一个DIV2，能完全覆盖在DIV1上，档住整个DIV1 ， 这样要怎么实现？

Answer 1

这个跟html元素的定位方式有关.

div默认的是 后面一个div根据前一个div来定位. 也就是相对定位;

而你这里需要的,实际上就是两个div根据他们的父容器来定位, 也就是绝对定位. 并且, 后面一个div覆盖到前一个上面.

所以, 你应该使用的是

<style>
.parentDiv{
position:relative;
}
.div1{
position:absolute;
z-index:1;
}
.div2{
position:absolute;
z-index:2;
}
</style>
<div class="parentDiv">
<div class="div1">
我在下面
</div>
<div class="div2">
我在上面
</div>
</div>

Answer 2

这个用绝对定位就可以搞定了

position:absolute;

举个例子,

css代码

.div1{height:30px; width:100%; background:#fff; position:relative; z-index:1;}
.div2{height:30px; width:100%; background:#f00; position:absolute; top:0px; left:0; z-index:2;}

html代码

<div class="div1"><div class="div2"></div></div>

这样子div2就能完全覆盖在div1上了

Answer 3

用 css 中的 Z-index 能够实现 为 不同的div设置 不同的 Z-index 数值

div1{
Z-index:1;
}
div2{
Z-index:2;
}
div2 就覆盖在 div1 的上面