html 添加遮罩

时间：2021-06-04 01:33:08 收藏：0 阅读：31

代码：

<style type="text/css">
    .Box{
        position: relative;
        width: 200px;
        height: 200px;
        background-color: red;
    }
    .Shade{
        position: absolute;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: #333;
        opacity: 0.3;
    }
</style>

<div class="Box">
    <div class="Shade"></div>
    <div>
        <p>被遮罩元素</p>
        <button type="button">OK</button>
        <p>被遮罩元素</p>
    </div>
</div>

总结：

　　这里主要是 position 的使用技巧，针对该属性在下面做个总结：

- static 默认情况下元素使用的是该属性值；
- relative 表明该元素还在自己的文档流中，只是相对于之前自己的位置进行的偏移
- absolute 表明该元素不在文档流中，是相对于已定位的祖先元素的偏移量；如果族
  先元素没有使用position定位，怎该元素会相对于文档来进行定位
- fixed 针对浏览器的窗口进行定义

原文：https://www.cnblogs.com/gamecc666/p/14845773.html