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

期初遇到模态框全屏问题时，总是会处理成当前显示全屏，但屏幕移动后尚有区域未被覆盖。 代码块如下： .mask{ position:absolute; top

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

代码块如下：

.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>