html 添加遮罩

Posted 2021-06-04 gamecc666

代码：

　　

<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 针对浏览器的窗口进行定义