css两个div叠加

CSS中，我们可以使用position属性来设置一个元素在网页中的定位方式。而当两个元素的position设置为absolute时，他们会出现叠加的情况。

 div{
        position: absolute;
    } 

举个例子，我们可以创建两个div，分别命名为div1和div2。然后将他们的position都设置为absolute，并设置top、left、height、width等属性，使他们显示在同一位置。

 <div id="div1" style="position: absolute; top: 0; left: 0; height: 100px; width: 100px; background-color: red"></div>
    <div id="div2" style="position: absolute; top: 0; left: 0; height: 100px; width: 100px; background-color: blue"></div> 

经过以上的设置，我们会发现div2完全盖住了div1，使得div1无法被看到。

那么如何解决这个问题呢？我们可以使用z-index属性。该属性指定了一个元素的堆叠顺序，值越大表示在上层。

 <div id="div1" style="position: absolute; top: 0; left: 0; height: 100px; width: 100px; background-color: red; z-index: 1"></div>
    <div id="div2" style="position: absolute; top: 0; left: 0; height: 100px; width: 100px; background-color: blue; z-index: 2"></div> 

在上面的例子中，我们为div1设置了z-index为1，为div2设置了z-index为2。这样div2就会出现在div1的上面，达到我们想要的效果。