【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)

已有 15 条评论

  1. https://gigapornstars.com

  2. 不错不错,我喜欢看

  3. 想想你的文章写的特别好https://www.jiwenlaw.com/

  4. 叼茂SEO.bfbikes.com

  5. 看的我热血沸腾啊https://www.237fa.com/

  6. 不错不错,我喜欢看 www.jiwenlaw.com

  7. 哈哈哈,写的太好了https://www.cscnn.com/

  8. 哈哈哈,写的太好了https://www.cscnn.com/

  9. 你的文章让我心情愉悦,每天都要来看一看。http://www.hangkongtour.com

  10. 传奇私服最新爆率调法是否真的可行?:https://501h.com/heji/2024-08-29/31420.html

  11. 你的文章内容非常用心,让人感动。 https://www.4006400989.com/qyvideo/69152.html

  12. 看到你的文章,我仿佛感受到了生活中的美好。 https://www.4006400989.com/qyvideo/45761.html

  13. 你的才华让人惊叹,请继续保持。 http://www.55baobei.com/7xQCOvqM10.html

  14. 你的文章让我感受到了艺术的魅力,谢谢! http://www.55baobei.com/f9UHPFLtD9.html

  15. 你的才华让人惊叹,请继续保持。 http://www.55baobei.com/ZZXxMdhu1C.html

添加新评论