css下面的盒子覆盖上面的盒子

CSS中盒子之间的覆盖是一个常见的问题，很多开发者可能会遇到盒子不如预期覆盖的情况。例如下面这个简单的 HTML 展示了两个盒子，一个绿色，一个红色，它们重叠在一起。

 <div class="box green"></div>
  <div class="box red"></div> 

盒子重叠可以是有意为之，也可以是不希望出现的。当想在一个盒子上方绘制另一个盒子时，需要使用z-index属性。z-index属性用于设置盒子的堆叠顺序。

 .box {
    position: absolute;
    width: 100px;
    height: 100px;
  }
  .green {
    background-color: green;
    z-index: 1;
  }
  .red {
    background-color: red;
    z-index: 2;
  } 

在上面的CSS代码中，我们首先将两个盒子的position属性设置为absolute。position:absolute会将盒子从文档流中移除，使得它们可以在界面上随意移动。下一步是设置两个盒子的宽度和高度相等，这里设置为100px。接着我们为green盒子设置了一个z-index为1的值，而red盒子设置了一个更高的z-index为2的值。这里值越高的盒子就会覆盖值较低的盒子。

需要注意的是，z-index只作用于position属性值为relative、absolute或fixed的元素。

在实际的开发中，盒子的覆盖往往需要更多样的处理，例如需要对盒子的位置、宽度、高度等进行相应的调整。通过对z-index的灵活运用，可以让开发者更方便地处理盒子覆盖的问题。