不受控制的 position:fixed
大家都知道,position:fixed
在日常的页面布局中非常常用,在许多布局中起到了关键的作用。它的作用是:
position:fixed
的元素将相对于屏幕视口(viewport)的位置来指定其位置。并且元素的位置在屏幕滚动时不会改变。
但是,在许多特定的场合,指定了 position:fixed
的元素却无法相对于屏幕视口进行定位。这是为何呢?
失效的 position:fixed
在许多情况下,position:fixed
将会失效。MDN 用一句话概括了这种情况:
当元素祖先的 transform 属性非 none 时,定位容器由视口改为该祖先。
What!还有这种操作?可能有部分同学还没 get 到上面这句话的意思,通俗的讲就是指定了 position:fixed
的元素,如果其祖先元素存在非 none 的 transform 值 ,那么该元素将相对于设定了 transform
的祖先元素进行定位。
那么,为什么会发生这种情况呢?说好的相对视口(Viewport)定位呢?
这个问题,就牵涉到了 Stacking Context ,也就是堆叠上下文的概念了。解释上面的问题分为两步:
- 任何非 none 的 transform 值都会导致一个堆叠上下文(Stacking Context)和包含块(Containing Block)的创建。
- 由于堆叠上下文的创建,该元素会影响其子元素的固定定位。设置了
position:fixed
的子元素将不会基于 viewport 定位,而是基于这个父元素。
Stacking Context -- 堆叠上下文
好的嘛,好的嘛,又冒出新的名词了,堆叠上下文(又译作层叠上下文),又是什么?
堆叠上下文(Stacking Context):堆叠上下文是 HTML 元素的三维概念,这些 HTML 元素在一条假想的相对于面向(电脑屏幕的)视窗或者网页的用户的 z 轴上延伸,HTML 元素依据其自身属性按照优先级顺序占用层叠上下文的空间。
概念比较抽象,简单理解,记住 生成了 Stacking Context 的元素会影响该元素的层叠关系与定位关系。
关于 生成了 Stacking Context 的元素会影响该元素的层叠关系 这一点,具体可以看看这篇文章 层叠顺序(stacking level)与堆栈上下文(stacking context)知多少?
而本文提到了生成了 Stacking Context 的元素会影响该元素定位关系 。按照上面的说法,堆叠上下文的创建,该元素会影响其子元素的固定定位。设置了 position:fixed
的子元素将不会基于 viewport 定位,而是基于这个父元素。
那么问题来了,是否所有能够生成堆叠上下文的元素,都会使得其子元素的 position:fixed
相对它,而不是相对视口(Viewport)进行定位呢?
创建堆叠上下文的方式
为此,首先要找到所有能够使元素生成堆叠上下文的方法。
So,如何触发一个元素形成 堆叠上下文
?方法如下(参考自 MDN):
- 根元素 (HTML),
- z-index 值不为 "auto"的 绝对/相对定位,
- 一个 z-index 值不为 "auto"的 flex 项目 (flex item),即:父元素 display: flex|inline-flex,
- opacity 属性值小于 1 的元素(参考 the specification for opacity),
- transform 属性值不为 "none"的元素,
- mix-blend-mode 属性值不为 "normal"的元素,
- filter值不为“none”的元素,
- perspective值不为“none”的元素,
- isolation 属性被设置为 "isolate"的元素,
- position: fixed
- 在 will-change 中指定了任意 CSS 属性,即便你没有直接指定这些属性的值
- -webkit-overflow-scrolling 属性被设置 "touch"的元素
接下来,我们要验证,是否所有设置了上面属性样式之一的元素,都有使其子元素的 position: fixed
失效的能力?
为此我做了下面一个小实验,基于最新的 Blink 内核。可戳:
层叠上下文对 fixed 定位的影响(不同浏览器下表现可能不一样)
我们设置两个父子 div,子元素 fixed
定位,通过修改父元素生成层叠上下文,观察子元素的 fixed
定位是否不再相对视口。
<div class="container">
<div class="fixed"> </div>
</div>
最初的 CSS :
.container {
width:10vw;
height: 10vw;
background: rgba(255, 100, 100, .8);
}
.fixed {
position: fixed;
top: 1vw;
left: 1vw;
right: 1vw;
bottom: 1vw;
background: rgba(100, 100, 255, .8);
}
一探 position:fixed
失效的最终原因
通过上面的试验,在最新的 Blink 内核下,发现并不是所有能够生成层叠上下文的元素都会使得 position:fixed
失效,但也不止 transform
会使 position:fixed
失效。
所以,MDN 关于 position:fixed
的补充描述不够完善。下述 3 种方式目前都会使得 position:fixed
定位的基准元素改变(本文重点):
-
transform
属性值不为 none 的元素 -
perspective
值不为 none 的元素 - 在
will-change
中指定了任意 CSS 属性
不同内核的不同表现
完了吗?没有!我们再看看其他内核下的表现。
上面也谈到了,上述结论是在最新的 Chrome 浏览器下(Blink内核),经过测试发现,在 MAC 下的 Safari 浏览器(WebKit内核,Version 9.1.2 (11601.7.7))和 IE Trident/ 内核及 Edge 浏览器下,上述三种方式都不会改变 position: fixed
的表现!
所以,当遇到 position: fixed
定位基准元素改变的时候,需要具体问题具体分析,多尝试一下,根据需要兼容适配的浏览器作出调整,不能一概而论。
position:fixed 的其他问题
当然,position: fixed
在移动端实现头部、底部模块定位。或者是在 position: fixed
中使用了 input 也会存在一些问题,这个有很多文章都描述过并且存在很多解决方案,本文不讨论这块问题。
这方面的问题,可以看看这篇文章:移动端web页面使用position:fixed问题总结
最后
系列 CSS 文章汇总在我的 Github ,持续更新,欢迎点个 star 订阅收藏。
好了,本文到此结束,希望对你有帮助 :)
如果还有什么疑问或者建议,可以多多交流,原创文章,文笔有限,才疏学浅,文中若有不正之处,万望告知。
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 微信文章爬虫
- vue 随记(6):构建的艺术
- Centos7发布SpringBoot项目并后台运行
- k8s部署zookeeper集群
- dotnet 使用 SemaphoreSlim 可能的内存泄露
- WPF 绑定继承的样式提示 只能根据带有基类型 IFrameworkInputElement 的目标类型的 Style 样式
- 29.opengl高级光照-视差贴图
- SpringBoot集成Mybatis开启下划线格式的数据自动转换成小驼峰格式
- WPF 列表右键菜单比较符合 MVVM 的命令绑定方法
- Group Sample:一个简单有效的目标检测涨点Trick
- PyTorch版CenterNet数据加载解析
- WPF 使用 HandyControl 给 ListView 添加漂亮的表头效果
- kali2020 忘记密码
- 低比特量化之DoreFa-Net理论与实践
- 不用数组求多个数的最小值