fixed定位的一些特例我们需要知道了才能避开一些bug
Demo预览：
https://sunzsh.github.io/html-demos/fixed-size.html
代码：
https://github.com/sunzsh/st-html-demo/blob/master/fixed-size.html
大看这小伙伴发来的bug啊
他说在手机上展开没有问题
但是在PC端展开，大家看变成这样了
拿到这个demo
我的第一反应是他的z-index出了问题
但试了一圈我发现不是
是高度的问题
比如说我把现在这个div
它高度设高一点儿
height等于400 PX
大看它就出来了
那如果我不设这个高度呢
我们来看它的高度是多少是
那为什么不设高度的时候它是60呢
我们来看一下
它写了一个position的fixed
然后top和bottom
它是用这种fix定位
加上top和bottom来实现的高度
什么意思呢
我们来看这个demo
我现在红色的边框是外边的div
里边放了一个div
是fixed布局（口误：定位）
然后呢我设了一个top和bottom
然后它呈现出来的效果
就类似于垂直的100%样
那为什么在这个demo里
同样是fix布局
同样的操作它的高度变成60了呢
大家还记不记得
我这一期视频之前也提到过
（针对fixed定位）如果他们的祖先元素的
这3个属性发生变化
那么他们的定位
就会相对于他的这个父元素
而不是整个这个视口了
所以我们再回到这个例子
它的父级元素一定有一个
是修改了这三个其中的一个样式
其实呢就是这个
它设了一个这个backdrop-filter
大家看后把这个去掉
它就可以了
那最后还有一个疑问
为什么他在手机上可以
其实啊并不是在手机上可以
是在苹果设备上都
可以
原因是啊苹果系统包括Mac、iOS啊
他们的浏览器
针对于这个标准中的filter
没有很好的执行
比如说啊
这个父元素的filter属性发生变化了
在苹果系统下边
它不影响这个fixed定位
所以呢它在苹果系统里面都是可以的
那关于这个问题
我在Webkit官网上发现早在2020年的8月
就有人提过类似的issues
然后也贴了一个简单的demo
问题跟我们是一样的
但是至今呢也没有得到解决
最后更新于
这有帮助吗？