不受控制的 position:fixed

你們都知道，position:fixed 在平常的頁面佈局中很是經常使用，在許多佈局中起到了關鍵的做用。它的做用是：

position:fixed 的元素將相對於屏幕視口（viewport）的位置來指定其位置。而且元素的位置在屏幕滾動時不會改變。

可是，在許多特定的場合，指定了 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 定位的影響（不一樣瀏覽器下表現可能不同）

咱們設置兩個父子 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 內核下，發現並非全部可以生成層疊上下文的元素都會使得 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 也會存在一些問題，這個有不少文章都描述過而且存在不少解決方案，本文不討論這塊問題。

這方面的問題，能夠看看這篇文章：移動端web頁面使用position:fixed問題總結

 

最後

系列 CSS 文章彙總在個人 Github ，持續更新，歡迎點個 star 訂閱收藏。

好了，本文到此結束，但願對你有幫助 :)

若是還有什麼疑問或者建議，能夠多多交流，原創文章，文筆有限，才疏學淺，文中如有不正之處，萬望告知。