本文為純理論文章，沒有 Demo，沒有配圖，可能會略微枯燥。 大家都知道，position:fixed 在日常的頁面佈局中非常常用，在許多佈局中起到了關鍵的作用。它的作用是： position:fixed 的元素將相對於屏幕視口（viewport）的位置來指定其位置。並且元素的位置在屏幕滾動時不會改 ...
本文為純理論文章，沒有 Demo，沒有配圖，可能會略微枯燥。
大家都知道，position:fixed 在日常的頁面佈局中非常常用，在許多佈局中起到了關鍵的作用。它的作用是：
position:fixed 的元素將相對於屏幕視口（viewport）的位置來指定其位置。並且元素的位置在屏幕滾動時不會改變。
但是，在許多特定的場合，指定了 position:fixed 的元素卻無法相對於屏幕視口進行定位。這是為何呢？
失效的 position:fixed
在許多情況下，position:fixed 將會失效。MDN 用一句話概括了這種情況：
> 當元素祖先的 transform 屬性非 none 時，定位容器由視口改為該祖先。
What！還有這種操作？可能有部分同學還沒 get 到上面這句話的意思，通俗的講就是指定了 position:fixed 的元素，如果其祖先元素存在非 none 的 transform 值 ，那麼該元素將相對於設定了 transform 的祖先元素進行定位。
那麼，為什麼會發生這種情況呢？說好的相對視口（Viewport）定位呢？
這個問題，就牽涉到了 Stacking Context ，也就是堆疊上下文的概念了。解釋上面的問題分為兩步：
-
任何非 none 的 transform 值都會導致一個堆疊上下文（Stacking Context）和包含塊（Containing Block）的創建。
-
由於堆疊上下文的創建，該元素會影響其子元素的固定定位。設置了
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 失效的最終原因
所以，MDN 關於 position:fixed 的補充描述不夠完善。position:fixed 不僅僅只是在元素祖先的 transform 屬性非 none 時失效，而是：
所有能夠生成堆疊上下文的元素，都會使得其子元素的 position:fixed 相對它，而不是相對視口（Viewport）進行定位。（本文重點）
創建堆疊上下文的方式
上面都這麼說了，想必讓一個元素形成 堆疊上下文 的方式有很多種 。
So，如何觸發一個元素形成 堆疊上下文 ？方法如下：
- 根元素 (HTML),
- z-index 值不為 "auto"的 絕對/相對定位，
- 一個 z-index 值不為 "auto"的 flex 項目 (flex item)，即：父元素 display: flex|inline-flex，
- opacity 屬性值小於 1 的元素（參考 the specification for opacity），
- transform 屬性值不為 "none"的元素，
- mix-blend-mode 屬性值不為 "normal"的元素，
- filter值不為“none”的元素，
- perspective值不為“none”的元素，
- isolation 屬性被設置為 "isolate"的元素，
- position: fixed
- 在 will-change 中指定了任意 CSS 屬性，即便你沒有直接指定這些屬性的值
- -webkit-overflow-scrolling 屬性被設置 "touch"的元素
換言之，所有設置了上面屬性樣式的元素，都有使其子元素的 position: fixed 失效的能力。
position:fixed 的其他問題
當然，position: fixed 在移動端實現頭部、底部模塊定位。或者是在 position: fixed 中使用了 input 也會存在一些問題，這個有很多文章都描述過並且存在很多解決方案，本文不討論這塊問題。
這方面的問題，可以看看這篇文章：移動端web頁面使用position:fixed問題總結
最後
系列 CSS 文章彙總在我的 Github ，持續更新，歡迎點個 star 訂閱收藏。
好了，本文到此結束，希望對你有幫助 :)
如果還有什麼疑問或者建議，可以多多交流，原創文章，文筆有限，才疏學淺，文中若有不正之處，萬望告知。
