fixed
嵌套Fixed定位元素,被嵌套的元素层级异常或失效
http://zhangxuefei.site/p/1628
这个也就要改结构
深入探究iOS下fixed定位导致的问题
https://segmentfault.com/a/1190000010510291#articleHeader0
这个十分详细，各种情况的分析，还有动图一目了然
在PC中，由于「按钮」fixed定位和「其他」absolute定位脱离文档流。所以其显示层级比「项目列表」高，所以覆盖在「项目列表」外面。
在IOS中，元素只根据元素在代码中出现的顺序决定其显示的深度。即：布局格式并不能改变元素的显示深度。
所以「项目列表」覆盖了「其他」和「按钮」
有时间可以自己做一套实验
由于fixed的层级在ios上部分失效，导致弹窗被挡住，故将领取记录和领取成功的弹窗移到这个页面里面，本来可以在vipSide引入的，现在就要中转一次，将事件再往上传一级
- 首先是定位嵌套的问题，如果都是fixed定位，子级的层级也由父级决定
如下即使d2的子元素d21 层级z-index大于d3，但当d3的层级大于等于d2时候，d21还是会被d3挡住
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>fixed定位研究</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
.d1{
width: 300px;
height: 300px;
background: #F2DEDE;
}
.d2{
position: fixed;
top: 0;
left: 0;
z-index: 100;
width: 200px;
height: 200px;
background: yellowgreen;
}
.d21{
position: fixed;
top: 10px;
left: 10px;
z-index: 300;
width: 100px;
height: 100px;
background: darkred;
}
.d3{
position: fixed;
top:50px;
left: 50px;
z-index: 200;
width: 200px;
height: 200px;
background: deepskyblue;
}
</style>
</head>
<body>
<div class="d1">
我是最外层
<div class="d2">
我是d1子元素d2
<div class="d21">
我是d2的子元素d21
</div>
</div>
<div class="d3">
我是和d2平级的d3
</div>
</div>
</body>
</html>
- 在IOS中，元素只根据元素在代码中出现的顺序决定其显示的深度。后发现设置z-index后就不会有这个问题
- 子元素fixed 导致父级overflow:hidden 失效，（vue游戏项目中，某种情况下在pc-chrome不会截断，但ios会）
您可能不知道的CSS元素隐藏“失效”以其妙用 - 移动端 Web 开发踩坑之旅
如果 fixed 定位节点后面紧接跟着的兄弟节点是可滚动的(也就是设置了 overflow 为 true )，那么 fixed 节点会被其后的兄弟节点遮住。
一开始就没重现出第一个问题，要研究的就这个呀
后在vue中测试出确实和这个兄弟元素的overflow有关系，
overflow-x: hidden; 会遮住
overflow: auto;会遮住
overflow-y: auto; 会遮住
overflow: hidden;不会遮住
啊啊啊啊啊
终于是发现原来还是因为没有设置z-index导致的
站起来转了一圈，发现看反了
- 只有两层div的时候
所有问题均出现在ios上
.mask {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 500;
background: rgba(0, 0, 0, 0.5);
}
<div class="box">
<div class="mask"></div>
</div>
不设置overflow 均不会遮住
fixed+auto/hidden 遮住
relative+auto/hidden 不遮住
relative+zindex+auto/hidden 遮住
absolute与relative表现一致
可是vue情况是父级不设置zindex也会被遮住，这个和那个子级不设zindex的又不一样
现发现在vue中父级设置了overflow：auto；子级的fixed就会被遮住，父级overflow：hidden都不会；并且单独用html写就不会
现在再创建一个新的vue项目来测试，怕是老项目中引入太多其他东西，果然，新项目发现没问题，先把那两个UI框架去掉试试，没变化；woccc 最后居然发现去掉我们自己的common.css就可以了，好的再去这个css里面看看是哪个属性的问题，很快找到居然是body上的-webkit-overflow-scrolling: touch;导致的，woccccc
好的算是找到问题所在了，接下来就要研究这个属性了
深入研究-webkit-overflow-scrolling:touch及ios滚动
网友评论