css定位让两个div重叠

在 CSS 中，定位是指控制 HTML 元素在页面上放置的位置的一种方法。在定位属性中，有一个十分有趣的属性——z-index，可以让元素的层叠顺序发生变化，加上定位属性后，就可以通过这个属性让两个 div 元素进行重叠。

/* 定义两个 div 的样式 */
div {
  background-color: #f1f1f1;
  border: 1px solid black;
  width: 300px;
  height: 150px;
  padding: 10px;
  text-align: center;
  font-size: 24px;
}

/* 定义第一个 div 的定位 */
#div1 {
  position: absolute;
  top: 50px;
  left: 100px;
  z-index: 1;
}

/* 定义第二个 div 的定位 */
#div2 {
  position: absolute;
  top: 100px;
  left: 150px;
  z-index: 2;
}

在这段代码中，我们定义了两个 div 元素，第一个 div 的定位属性设置为 absolute，位置为 top: 50px,left: 100px，并设置 z-index 为 1；第二个 div 的位置为 top:100px,left: 150px，并将 z-index 设置为 2。

z-index 的值决定了元素的层叠顺序，z-index 值越大的元素就会在 z-index 值小的元素上面。因此，我们在这个例子中让第一个 div 的 z-index 值比第二个小，这样第二个 div 就会覆盖在第一个 div 上面。

除此之外，我们需要定义定位属性以声明元素已脱离文档流并可以自由移动，否则 z-index 属性无效。

这样，就可达到两个 div 元素重叠的效果。