# fixed定位的一些特例我们需要知道了才能避开一些bug

* 抖音：<https://v.douyin.com/kyCDnAx/>
* B站：<https://www.bilibili.com/video/BV17W4y1V7wK/>

> **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

问题跟我们是一样的

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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://sunzsh.gitbook.io/xiaoshan.bug/fixed-ding-wei-de-yi-xie-te-li-wo-men-xu-yao-zhi-dao-le-cai-neng-bi-kai-yi-xie-bug.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.