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

问题跟我们是一样的

但是至今呢也没有得到解决

最后更新于