侧边栏壁纸
博主头像
落叶人生博主等级

走进秋风,寻找秋天的落叶

  • 累计撰写 144666 篇文章
  • 累计创建 28 个标签
  • 累计收到 9 条评论
标签搜索

目 录CONTENT

文章目录

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

2024-02-22 星期四 / 0 评论 / 0 点赞 / 2 阅读 / 1718 字

期初遇到模态框全屏问题时,总是会处理成当前显示全屏,但屏幕移动后尚有区域未被覆盖。 代码块如下: .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>

 

广告 广告

评论区