一、固定定位

假如要想实现一个footer一直定位在页面底部，那么你肯定能想到fixed布局

实现这样的结构代码也非常简单：

二、固定定位一定是你想象中的固定定位吗

有的时候我们会用到transform属性，例如transform: translateZ(0);用来启用GPU进行硬件加速，或者用来进行位移，参考：前端一次性渲染十万条数据的处理思路 & 虚拟列表一、前置知识 js是单线程的，为了确保主线程不被长时间阻塞，js中有同步 - 掘金

现在，我们给wrapper元素设置上transform: translateZ(0);

效果就会变成这样：

这还是你想象中的固定定位吗？为什么footer不在页面最底下，反而跑到上面去了

所以说为什么有的代码当时是好好地，写着写着就会有各种奇怪的问题……

至此，回答下题目提出的问题，fixed不是一定按照视口进行定位的，它只是默认按照视口进行定位，它是可能会发生变化的，至于什么时候会变化，以及哪些属性会引起变化，我们再来探究

三、包含块

什么是包含块：

css中决定一个元素的尺寸和位置的上下文

一般情况下，包含块是最近一个position不为static的父级元素

例如：当给c设置绝对定位时，由于a和b都没有设置position属性，所以c的包含块依然是视口容器

当给b设置position属性（属性值不为static）时，c的包含块就变成了b，所以c就跑到b里面了

巧的是，当我们没有给b设置`position: relative;`而是设置了`transform: translateZ(0);`一样会使c跑到b里面，此时给c设置的`position`不是`absolute`而是`fixed`呢？结果是一样的

由这个案例可以知道一旦改变了某个属性的包含块，它的子级元素中设置的绝对定位或者固定定位会依赖这个包含块进行定位，哪些属性会生成包含块呢？

1. transform的值不为none

2. perspective的值不为none

3. will-change的值为transform或perspective

4. filter的值不为none，例如`filter: blur(1px);`

5. backdrop-filter的值不为none，例如`backdrop-filter: blur(10px);`

6. contain: paint;

7. clip-path和mask设置也会影响到包含块，例如：`mask: url('./1.jpg');`