【CSS】position:fixed 定位失效(变成absolute特性)

悠扬的幻想天空 - 博客

June 2, 2022 技术 • 作者:悠扬

先抛出结论

当元素祖先的 transform 属性非 none 时,定位容器由视口改为该祖先。

可以尝试添加 transform: unset; 解决该问题。

下述 3 种方式目前都会使得 position:fixed 定位的基准元素改变:

  1. transform 属性值不为 none 的元素
  2. perspective 值不为 none 的元素
  3. 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 ,也就是堆叠上下文的概念了。解释上面的问题分为两步:

  1. 任何非 none 的 transform 值都会导致一个堆叠上下文(Stacking Context)和包含块(Containing Block)的创建。
  2. 由于堆叠上下文的创建,该元素会影响其子元素的固定定位。设置了 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)

添加新评论