css 为div添加遮罩层

CSS是前端开发中非常重要的一部分，具有很强的样式控制能力。它还可以用来实现一些动态效果，比如为div添加遮罩层。

为div添加遮罩层，需要用到position属性和z-index属性。其中position属性定义元素的定位方式，常用的有static、relative、absolute、fixed；z-index属性定义元素的层叠顺序，数值越大越靠前。

  .mask {
        position: absolute;
        z-index: 999;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0,0,0,0.5);
  }
    .content {
        position: relative;
        z-index: 1;
  }
    

上面的代码中，我们为设置了position: absolute和z-index: 999，表示它的定位方式为相对于最近的已定位祖先元素（如果没有已定位祖先元素，则相对于body），层叠顺序为999，比内容层的层叠顺序高，可以覆盖内容层。

同时，我们为设置了position: relative和z-index: 1，表明其定位方式为相对定位，层叠顺序为1，即处于最下层。

这样，我们就为添加了一个半透明的遮罩层，实现了视觉效果上的高亮。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！