HTML CSS Divs重叠，如何让一个盖在另一个上面

在本文中，我们将介绍如何使用HTML和CSS来控制层叠布局（z-index属性）以及如何强制一个div覆盖在另一个div之上。

阅读更多：HTML 教程

什么是层叠布局？

在HTML和CSS中，层叠布局是指在页面上叠加多个元素，并根据它们的层叠顺序（z-index属性值）显示。默认情况下，HTML元素按照它们在HTML文档中的出现顺序进行层叠。但是，我们可以使用CSS的z-index属性来手动控制元素的层叠关系。

如何使用z-index属性？

要使用z-index属性，首先需要给要层叠的元素设置一个相对定位（position: relative或position: absolute）。然后，使用z-index属性为元素指定一个层叠顺序值，数值越大的元素会显示在数值较小的元素之上。

下面是一个示例，说明如何使用z-index属性控制层叠布局：

<!DOCTYPE html>
<html>
<head>
<style>
  .container {
    position: relative;
  }
  .box1 {
    position: relative;
    z-index: 1;
    background-color: red;
    width: 200px;
    height: 200px;
  }
  .box2 {
    position: relative;
    z-index: 2;
    background-color: blue;
    width: 200px;
    height: 200px;
    top: -150px;
    left: 150px;
  }
</style>
</head>
<body>

<div class="container">
  <div class="box1"></div>
  <div class="box2"></div>
</div>

</body>
</html>

在上面的示例中，我们创建了一个包含两个div的容器。box1的z-index值为1，box2的z-index值为2。由于box2的z-index值较大，它会显示在box1之上。通过设置box2的top和left属性，我们可以将它移动到box1的上方，形成一个重叠的效果。

如何强制一个div覆盖在另一个div之上？

有时，我们可能想要强制一个div覆盖在另一个div之上，而不考虑它们在HTML文档中的顺序。为了实现这一点，我们可以将要覆盖的div的z-index属性设置为一个较大的值，以确保它在层叠布局中处于顶层位置。

以下是一个示例，演示如何使用z-index属性强制一个div覆盖在另一个div之上：

<!DOCTYPE html>
<html>
<head>
<style>
 .container {
   position: relative;
   width: 400px;
   height: 400px;
 }

 .box1 {
   position: relative;
   z-index: 1;
   background-color: red;
   width: 200px;
   height: 200px;
   left: 100px;
   top: 100px;
 }

 .box2 {
   position: absolute;
   z-index: 2;
   background-color: blue;
   width: 200px;
   height: 200px;
   left: 150px;
   top: 150px;
 }
</style>
</head>
<body>

<div class="container">
  <div class="box1"></div>
  <div class="box2"></div>
</div>

</body>
</html>