css定位 两个dix叠层

CSS定位是一种强大的排版技术，可以用来控制网页元素的位置、大小、层叠等方面。其中层叠就是指网页元素如何在页面中排列、重叠等。如果我们需要将两个div元素叠放在一起，就需要用到CSS定位中的层叠技术。

首先，我们需要使用CSS来定义两个div元素的样式：

    div {
        width: 100px;
        height: 100px;
        position: absolute;
    }

    #div1 {
        background-color: blue;
        top: 0;
        left: 0;
        z-index: 1;
    }

    #div2 {
        background-color: red;
        top: 20px;
        left: 20px;
        z-index: 2;
    }

在上面的代码中，我们定义了两个div元素，它们的宽度和高度都是100个像素，并且使用了“绝对定位”（position: absolute）这个属性。这表示这两个元素将会从它们的父元素中“脱离出来”，并且可以通过top、left等属性来控制它们的位置。

接着，我们分别给这两个div元素添加背景色，使用了“z-index”属性来控制它们的层叠顺序。该属性值越大，越靠近顶部。在这个例子中，我们让第一个div元素z-index为1，第二个div元素z-index为2，这样它们就会按照这个顺序在页面上叠放。

最终的效果是什么样子呢？请看下图：

在上图中，我们可以看到第一个蓝色div元素在第二个红色div元素的下面，这是由z-index属性决定的。如果我们把这两个元素的z-index值调换一下，就会发现红色元素被蓝色元素遮挡住了。

总之，CSS的定位技术可以帮助我们轻松地控制元素的层叠顺序，从而实现更加复杂的网页排版效果。在实际应用中，我们可以根据自己的需求来灵活运用这个技巧，以实现更好的页面设计效果。