【CSS】- 遮罩层效果

2019独角兽企业重金招聘Python工程师标准>>>

position 类型

• 普通定位:定位，系统默认的定位方式
• 相对定位：relative: 元素相对原来的位置的偏移位置，原来的空间任保留
• 绝对定位：abslute: 元素相对其包含块的定位(父级为基准(父级元素必须是相对定位如果不是则一直往上找，直到找到body为止)来进行偏移)
• 固定定位：fixed: 相对于窗口的绝对定位

CCSS样式

 div{
    width: 50px;
          height: 50px;
      }       
.div01{
       position: static; /**普通定位*/
       background-color: yellow;
   }
  .div02{
      position: relative; /**相对定位*/
      background-color: blue;
      width: 150px;
      height: 150px;
      left: 50px;  /**相对于原来的位置向右偏移50px*/
  }
 .div03{
     position: absolute; /**绝对定位*/
     background-color: red;
     left: 50px; /**相对于父级相对元素偏移50px，如果没有父级相对定位元素则默认body*/
 }
 .div04{/**固定定位会脱离文档流，其他空白位置都可以填写信息*/
      position: fixed; /**固定定位*/
      background-color: green;
      right: 50px; /**距离窗口右边偏移50px*/
  }
            
.div05{/**遮罩层：z-index垂直屏幕的方向设定，类似ps的图层叠加原理*/
        position: absolute; 
        background-color: pink;
        left: 0px;
        top: 0px;  /**如果不设置则按照默认的位置显示*/
        width: 100%; /***100%:标识遮罩层覆盖整个浏览器窗口*/
        height: 100%;
        opacity: 0.5;  /**透明度*/
        z-index: 999;  /**Z轴坐标：值遇到标识越贴近用户*/
    }

界面

<div class="div01">静态定位</div>
<div class="div02">我是相对定位
    <div class="div03">我是绝对定位</div>
</div>
<div class="div04">固定定位</div>


<br />
<p><input type="button" value="显示遮罩层"></p>

<br/><br/>
<div style="display: none;" class="div05">
    Hello Python World!
</div>

Javascript操作代码：

$("input[type=button]").click(function(){
    console.log($(".div05").is(":visible"));
     $(".div05").toggle(function(){
         $(".div05").show();
     });
 });

效果：

转载于:https://my.oschina.net/yangzhiwei256/blog/3016946