简单总结模态框全屏覆盖问题

为什么80%的码农都做不了架构师？>>>   

期初遇到模态框全屏问题时，总是会处理成当前显示全屏，但屏幕移动后尚有区域未被覆盖。

代码块如下：

.mask{
            position:absolute;
            top:0;
            left:0;
            width:100%;
            height:100%;
            background:rgba(0,0,0,0.5);
            z-index:5;
        }
 .mask{
            position:absolute;
            top:0;
            left:0;
            right:0;
	        bottom:0;
            background:rgba(0,0,0,0.5);
            z-index:5;
        }

经查阅资料可知：以上两段代码仅仅能适配显示屏大小，而不能适配整个页面，从而会出现滑动产生并未完全覆盖的问题。

百度后的结果比较杂乱，且都提到了用JS来控制，最简单的一种方式就是将position:absolute;改为position:fixed;即可；

后经个人探究发现，在模态框的父容器上添加 position:relative;属性也即可实现完全覆盖。

若父容器为body,也需加上这条属性方可实现。

body{   
     position:relative;
    }
.mask{
      position:absolute;
      top:0;
      left:0;
      right:0;
	  bottom:0;
      background:rgba(0,0,0,0.5);
      z-index:5;
      }

另外，也顺便提一下：利用绝对定位的top和bottom配合也可实现高度的自适应布局，如下：

<div style="height:100px;background:#3e3;">
    固定高度
</div>
<div style="position:absolute;top:100px;bottom:0;left:0;right:0;background:#33e;">
  自适应高度
</div>

 

转载于:https://my.oschina.net/bghead/blog/789054