已掉线,重新登录

首页 > 绿虎论坛 > 历史版块 > 编程 > HTML/CSS/JS

标题: css遮罩层上面跟底层会一起移动,大佬们怎么解决的?[问题已解决]

作者: @Ta

时间: 2019-10-15发布,2019-10-16修改

点击: 3520

css代码:

<style type="text/css">
body
{
 width:100%;
height: 100%;
 margin: 0px;
   padding:0px;
   background-image: url('【背景】'); 
   background-position: center; 
   background-repeat: no-repeat; 
   background-attachment: fixed; 
   background-size:100% 100%;
   overflow:auto;
}
.zhezhao
{
position: fixed;
left: 0px;
top: 0px;
     right: 0px;
     bottom: 0px;
background: #ffffff;
  position:absolute;
z-index:1001;
width: 100%;
height: 100%;
text-align: center;
}
.tankuang
{
 left: 0px;
top: 0px;
     right: 0px;
     bottom: 0px;
position: relative;
  overflow:auto;
background:#ffffff;
background-image: url('【背景】');
 background-position: center;
 background-repeat: no-repeat; 
 background-attachment: fixed; 
 background-size:100% 100%;
position:absolute;
z-index:1002;
width: 100%;
 height:100%;
border-radius: 5px;
margin: 0 auto;
paddimg:5px;
text-align: center;
}
#header-right
{
position:absolute;
  z-index:1003;
border-radius: 90px;
background:#c0c0c0;
color:#000000;
right: 2px;
top: 0px;
letter-spacing:1px;
  font-size:40px;
  border-style:dotted;
  border-width:2px;
  border-color:#ffffff;
text-align: center;
padding-left:18px;
padding-right:18px;
opacity:0.8;
}
</style>


怎么解决遮罩层跟底层一起移动问题?底层滚动上面一层也跟着动,遮罩层怎么才能全屏?移动端的,有没有解决办法,大家😂百度了好久找不到办法

[隐藏样式|查看源码]


『回复列表(4|隐藏机器人聊天)』

1.

记得element-ui的v-loading有一个lock修饰符,查了下源码发现它在body标签上插入了overflow:hidden样式。如果是移动端可以尝试监听touchstart事件,然后禁止浏览器默认行为event.preventDefault()

(/@Ta/2019-10-15 12:07//)

2. 一楼正解。不过你这个需求是不是不太对,遮罩层弹出后为啥底层还要能滚动...
(/@Ta/2019-10-15 18:19//)

3. @iola1999,不是,我是想遮罩层不跟随底层滚动,遮罩层固定全屏的,有什么办法
(/@Ta/2019-10-15 20:47//)

4. @我没K,问题已解决了,只要把遮罩层的position: fixed;设置成这个属性就可以了
(/@Ta/2019-10-16 01:30//)

回复需要登录

7月14日 02:21 星期一

本站由hu60wap6驱动

备案号: 京ICP备18041936号-1