【CSS】position:fixed 定位失效(变成absolute特性)
悠扬的幻想天空 - 博客
June 2, 2022 技术 • 作者:悠扬
先抛出结论
当元素祖先的 transform 属性非 none 时,定位容器由视口改为该祖先。可以尝试添加 transform: unset; 解决该问题。
下述 3 种方式目前都会使得 position:fixed
定位的基准元素改变:
transform
属性值不为 none 的元素perspective
值不为 none 的元素- 在
will-change
中指定了任意 CSS 属性
失效的 position:fixed
大家都知道,position:fixed
在日常的页面布局中非常常用,在许多布局中起到了关键的作用。它的作用是:
position:fixed
的元素将相对于屏幕视口(viewport)的位置来指定其位置。并且元素的位置在屏幕滚动时不会改变。
但是,在许多特定的场合,指定了 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 (https://www.cnblogs.com/coco1s/p/7358830.html)
https://gigapornstars.com
不错不错,我喜欢看
想想你的文章写的特别好https://www.jiwenlaw.com/
叼茂SEO.bfbikes.com
看的我热血沸腾啊https://www.237fa.com/