[分享]css两个div叠

CSS技术可以让我们把不同的HTML元素排列在同一个页面上，同时又保持不同元素的独立性。使用CSS可以轻松地调整不同页面元素的位置、大小、颜色等属性。 这里我们将介绍如何使用CSS在页面中叠放两个di...

CSS技术可以让我们把不同的HTML元素排列在同一个页面上，同时又保持不同元素的独立性。使用CSS可以轻松地调整不同页面元素的位置、大小、颜色等属性。 这里我们将介绍如何使用CSS在页面中叠放两个div元素。

/*CSS代码*/
div {
  width: 200px;
  height: 200px;
  border: 1px solid black;
}

#box1 {
  background-color: pink;
  position: absolute;
  top: 80px;
  left: 80px;
  z-index: 1;
}
#box2 {
  background-color: lightblue;
  position: absolute;
  top: 100px;
  left: 100px;
  z-index: 2;
} 

以上代码中，我们首先定义了两个具有相同尺寸和边框的div元素。然后我们分配了两个ID分别为box1和box2。层叠顺序（Z-index）属性用于指定元素的堆叠顺序，具有较高层叠顺序的元素会在页面上显示在顶部。

最后，通过使用绝对定位（position:absolute）属性，我们将box1和box2元素放置在页面的特定位置。在这个例子中，我们将box1放置在box2上方，因为它具有更轻的 z-index 值。这就是如何用CSS来实现两个div元素的叠放。