css一个div遮住另一个div

CSS 中，可以使用 z-index 属性来控制层级关系，这个属性可以让元素覆盖其他元素

在我们的页面中，如果想让一个 div 遮住另一个 div，我们可以利用 z-index 属性来实现

 .container {
    position: relative; /*让内部的元素相对于此元素定位*/
  }
  .overlay {
    position: absolute; /*让元素脱离文档流*/
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.5); /*添加透明度*/
    z-index: 1; /*提高层级*/
  }
  .content {
    position: relative; /*让内部的元素相对于此元素定位*/
    z-index: 2; /*提高层级*/
  } 

在上面的代码中，我们首先给容器 .container 设置了相对定位，这样内部的元素设置绝对定位时，会相对 .container 进行定位

然后我们给要遮住的 div 设置了绝对定位，使其脱离文档流，让其能够遮盖下面的元素，并且设置了宽高 100% ，保证其能够铺满整个容器

接着，我们通过设置 z-index 属性，将遮盖层的层级提高（一般情况下，层级数值越大的元素就越在上面），让其能够覆盖下面的 div

最后，我们给要展示的 div 也设置了相对定位，并且将其层级也提高，保证其能够放在遮盖层的上面

这样，我们就成功实现了一个 div 遮住另一个 div 的效果