• 售前

  • 售后

热门帖子
入门百科

详解CSS不受控制的position fixed

[复制链接]
乔微博 显示全部楼层 发表于 2021-8-16 12:12:51 |阅读模式 打印 上一主题 下一主题
目次


  • 失效的 position:fixed
  • Stacking Context -- 堆叠上下文
  • 创建堆叠上下文的方式
  • 一探position:fixed失效的最终缘故原由
  • 差异内核的差异表现
  • position:fixed的其他题目

失效的 position:fixed

在许多环境下,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相对它,而不是相对视口(Viewport)进行定位呢?

创建堆叠上下文的方式

为此,起首要找到全部可以或许使元素生成堆叠上下文的方法。
So,如何触发一个元素形成堆叠上下文?方法如下(参考自MDN):
1.根元素 (HTML),
2.z-index 值不为 "auto"的 绝对/相对定位,
3.一个 z-index 值不为 "auto"的 flex 项目 (flex item),即:父元素 display: flex|inline-flex,
4.opacity 属性值小于 1 的元素(参考 the specification for opacity),
5.transform 属性值不为 "none"的元素,
6.mix-blend-mode 属性值不为 "normal"的元素,
7.filter值不为“none”的元素,
8.perspective值不为“none”的元素,
9.isolation 属性被设置为 "isolate"的元素,
10.position: fixed
11.在 will-change 中指定了恣意 CSS 属性,即便你没有直接指定这些属性的值
12.-webkit-overflow-scrolling 属性被设置 "touch"的元素
接下来,我们要验证,是否全部设置了上面属性样式之一的元素,都有使其子元素的position: fixed失效的能力?
为此我做了下面一个小实行,基于最新的 Blink 内核。可戳:
层叠上下文对 fixed 定位的影响(差异浏览器下表现可能不一样)
  1. h1 {
  2.     position: absolute;
  3.     top: 50%;
  4.     left: 50%;
  5.     transform: translate(-50%, -50%);
  6.     z-index: 999;
  7.     height: 10vh;
  8.     line-height: 10vh;
  9.     color: #333;
  10.     font-size: 1.5vw;
  11. }
  12. select {
  13.     height: 10vh;
  14.     line-height: 10vh;
  15.     font-size: 1vw;
  16.     outline: none;
  17.     border: 1px solid #333;
  18. }
  19. .container {
  20.     width:10vw;
  21.     height: 10vw;
  22.     // transform: translate3d(5vw, 5vw, 0);
  23.     // will-change: transform;
  24.     background: rgba(255, 100, 100, .8);
  25. }
  26. .fixed {
  27.     position: fixed;
  28.     top: 1vw;
  29.     left: 1vw;
  30.     right: 1vw;
  31.     bottom: 1vw;
  32.     background: rgba(100, 100, 255, .8);
  33. }
  34. .g-absolute {
  35.     position: absolute;
  36.     z-index: 10;
  37. }
  38. .g-flex {
  39.     display: flex;
  40.     z-index: 10;
  41. }
  42. .g-opacity {
  43.     opacity: .5;
  44. }
  45. .g-transform {
  46.     transform: translate3d(0, 0, 0);
  47.     // transform: scale(1);
  48. }
  49. .g-blend {
  50.     mix-blend-mode: screen;
  51. }
  52. .g-filter {
  53.     filter: blur(5px);
  54. }
  55. .g-perspective {
  56.     perspective: 1000px;
  57. }
  58. .g-isolation{
  59.     isolation: isolate;
  60. }
  61. .g-fixed {
  62.     position: fixed;
  63. }
  64. .g-willChange {
  65.     will-change: transform;
  66. }
  67. .g-scrolling {
  68.     -webkit-overflow-scrolling: touch;
  69. }
  70. .g-backface {
  71.     backface-visibility: hidden;
  72. }
  73. .g-preserve3d {
  74.     transform-style: preserve-3d;
  75. }
  76. .g-contain {
  77.     contain: paint;
  78. }
复制代码
  1. <div class="container">
  2.   <div class="fixed"> </div>
  3. </div>
复制代码
  1. (function () {
  2.   let old = "";
  3.   let dom = $(".container");
  4.   $('#select').on("change", function (e) {
  5.     let current = $(this).val();
  6.     dom.removeClass(old).addClass(current);
  7.     old = current;
  8.   });
  9. })();
复制代码

我们设置两个父子 div,子元素fixed定位,通过修改父元素生成层叠上下文,观察子元素的fixed定位是否不再相对视口。
  1. <div class="container">
  2.   <div class="fixed"> </div>
  3. </div>
复制代码
最初的 CSS :
  1. .container {
  2.     width:10vw;
  3.     height: 10vw;
  4.     background: rgba(255, 100, 100, .8);
  5. }
  6. .fixed {
  7.     position: fixed;
  8.     top: 1vw;
  9.     left: 1vw;
  10.     right: 1vw;
  11.     bottom: 1vw;
  12.     background: rgba(100, 100, 255, .8);
  13. }
复制代码
一探position:fixed失效的最终缘故原由

通过上面的试验,在最新的 Blink 内核下,发现并不是全部可以或许生成层叠上下文的元素都会使得position:fixed失效,但也不止transform会使position:fixed失效。
所以,MDN 关于position:fixed的增补描述不敷完善。下述 3 种方式现在都会使得position:fixed定位的基准元素改变(本文重点):
1.transform属性值不为 none 的元素
2.perspective值不为 none 的元素
3.在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 也会存在一些题目,这个有许多文章都描述过而且存在许多办理方案,本文不讨论这块题目。
以上就是详解CSS不受控制的position fixed的详细内容,更多关于CSS不受控制的position fixed的资料请关注草根技术分享别的相干文章!

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作