詳解CSS不受控制的position fixed

失效的 position:fixed

在許多情況下，position:fixed將會失效。MDN用一句話概括了這種情況：

當(dāng)元素祖先的 transform 屬性非 none 時，定位容器由視口改為該祖先。

What！還有這種操作？可能有部分同學(xué)還沒 get 到上面這句話的意思，通俗的講就是指定了position:fixed的元素，如果其祖先元素存在非 none 的 transform 值 ，那么該元素將相對于設(shè)定了transform的祖先元素進行定位。

那么，為什么會發(fā)生這種情況呢？說好的相對視口（Viewport）定位呢？

這個問題，就牽涉到了 Stacking Context ，也就是堆疊上下文的概念了。解釋上面的問題分為兩步：

1.任何非 none 的 transform 值都會導(dǎo)致一個堆疊上下文（Stacking Context）和包含塊（Containing Block）的創(chuàng)建。

2.由于堆疊上下文的創(chuàng)建，該元素會影響其子元素的固定定位。設(shè)置了position:fixed的子元素將不會基于 viewport 定位，而是基于這個父元素。

Stacking Context -- 堆疊上下文

好的嘛，好的嘛，又冒出新的名詞了，堆疊上下文（又譯作層疊上下文），又是什么？

堆疊上下文（Stacking Context）：堆疊上下文是 HTML 元素的三維概念，這些 HTML 元素在一條假想的相對于面向（電腦屏幕的）視窗或者網(wǎng)頁的用戶的 z 軸上延伸，HTML 元素依據(jù)其自身屬性按照優(yōu)先級順序占用層疊上下文的空間。

概念比較抽象，簡單理解，記住生成了 Stacking Context 的元素會影響該元素的層疊關(guān)系與定位關(guān)系。

關(guān)于生成了 Stacking Context 的元素會影響該元素的層疊關(guān)系這一點，具體可以看看這篇文章層疊順序（stacking level）與堆棧上下文（stacking context）知多少？

而本文提到了生成了 Stacking Context 的元素會影響該元素定位關(guān)系。按照上面的說法，堆疊上下文的創(chuàng)建，該元素會影響其子元素的固定定位。設(shè)置了position:fixed的子元素將不會基于 viewport 定位，而是基于這個父元素。

那么問題來了，是否所有能夠生成堆疊上下文的元素，都會使得其子元素的position:fixed相對它，而不是相對視口（Viewport）進行定位呢？

創(chuàng)建堆疊上下文的方式

為此，首先要找到所有能夠使元素生成堆疊上下文的方法。

So，如何觸發(fā)一個元素形成堆疊上下文？方法如下（參考自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 屬性被設(shè)置為 "isolate"的元素，

10.position: fixed

11.在 will-change 中指定了任意 CSS 屬性，即便你沒有直接指定這些屬性的值

12.-webkit-overflow-scrolling 屬性被設(shè)置 "touch"的元素

接下來，我們要驗證，是否所有設(shè)置了上面屬性樣式之一的元素，都有使其子元素的position: fixed失效的能力？

為此我做了下面一個小實驗，基于最新的 Blink 內(nèi)核?？纱粒?/p>

層疊上下文對 fixed 定位的影響（不同瀏覽器下表現(xiàn)可能不一樣）

h1 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 999;
    height: 10vh;
    line-height: 10vh;
    color: #333;
    font-size: 1.5vw;
}

select {
    height: 10vh;
    line-height: 10vh;
    font-size: 1vw;
    outline: none;
    border: 1px solid #333;
}

.container {
    width:10vw;
    height: 10vw;
    // transform: translate3d(5vw, 5vw, 0);
    // will-change: transform;
    background: rgba(255, 100, 100, .8);
}

.fixed {
    position: fixed;
    top: 1vw;
    left: 1vw;
    right: 1vw;
    bottom: 1vw;
    background: rgba(100, 100, 255, .8);
}

.g-absolute {
    position: absolute;
    z-index: 10;
}

.g-flex {
    display: flex;
    z-index: 10;
}

.g-opacity {
    opacity: .5;
}

.g-transform {
    transform: translate3d(0, 0, 0);
    // transform: scale(1);
}

.g-blend {
    mix-blend-mode: screen;
}

.g-filter {
    filter: blur(5px);
}

.g-perspective {
    perspective: 1000px;
}

.g-isolation{
    isolation: isolate;
}

.g-fixed {
    position: fixed;
}

.g-willChange {
    will-change: transform;
}

.g-scrolling {
    -webkit-overflow-scrolling: touch;
}

.g-backface {
    backface-visibility: hidden;
}

.g-preserve3d {
    transform-style: preserve-3d;
}

.g-contain {
    contain: paint;
}

div class="container"> 
  div class="fixed"> /div>
/div>

(function () {
  let old = "";
  let dom = $(".container");

  $('#select').on("change", function (e) {
    let current = $(this).val();
    dom.removeClass(old).addClass(current);
    old = current;
  });
})();

我們設(shè)置兩個父子 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 內(nèi)核下，發(fā)現(xiàn)并不是所有能夠生成層疊上下文的元素都會使得position:fixed失效，但也不止transform會使position:fixed失效。

所以，MDN 關(guān)于position:fixed的補充描述不夠完善。下述 3 種方式目前都會使得position:fixed定位的基準元素改變（本文重點）：

1.transform屬性值不為 none 的元素

2.perspective值不為 none 的元素

3.在will-change中指定了任意 CSS 屬性

不同內(nèi)核的不同表現(xiàn)

完了嗎？沒有！我們再看看其他內(nèi)核下的表現(xiàn)。

上面也談到了，上述結(jié)論是在最新的 Chrome 瀏覽器下（Blink內(nèi)核），經(jīng)過測試發(fā)現(xiàn)，在 MAC 下的 Safari 瀏覽器（WebKit內(nèi)核，Version 9.1.2 (11601.7.7)）和 IE Trident/ 內(nèi)核及 Edge 瀏覽器下，上述三種方式都不會改變position: fixed的表現(xiàn)！

所以，當(dāng)遇到position: fixed定位基準元素改變的時候，需要具體問題具體分析，多嘗試一下，根據(jù)需要兼容適配的瀏覽器作出調(diào)整，不能一概而論。

position:fixed的其他問題

當(dāng)然，position: fixed在移動端實現(xiàn)頭部、底部模塊定位。或者是在position: fixed中使用了 input 也會存在一些問題，這個有很多文章都描述過并且存在很多解決方案，本文不討論這塊問題。

以上就是詳解CSS不受控制的position fixed的詳細內(nèi)容，更多關(guān)于CSS不受控制的position fixed的資料請關(guān)注腳本之家其它相關(guān)文章！