大家都知道，position:fixed在日常的頁面布局中非常常用，在許多布局中起到了關鍵的作用。它的作用是：
position:fixed的元素將相對於螢幕視口（viewport）的位置來指定其位置。並且元素的位置在螢幕滾動時不會改變。
但是，在許多特定的場合，指定了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）：堆疊上下文是 html 元素的三維概念，這些 html 元素在一條假想的相對於面向（電腦螢幕的）視窗或者網頁的使用者的 z 軸上延伸，html 元素依據其自身屬性按照優先順序順序占用層疊上下文的空間。
概念比較抽象，簡單理解，記住 生成了 stacking context 的元素會影響該元素的層疊關係與定位關係。
關於 生成了 stacking context 的元素會影響該元素的層疊關係 這一點，具體可以看看這篇文章 層疊順序（stacking level）與堆疊上下文（stacking context）知多少？
而本文提到了生成了 stacking context 的元素會影響該元素定位關係 。按照上面的說法，堆疊上下文的建立，該元素會影響其子元素的固定定位。設定了position:fixed的子元素將不會基於 viewport 定位，而是基於這個父元素。
那麼問題來了，是否所有能夠生成堆疊上下文的元素，都會使得其子元素的position:fixed相對它，而不是相對視口（viewport）進行定位呢？
為此，首先要找到所有能夠使元素生成堆疊上下文的方法。
so，如何觸發乙個元素形成堆疊上下文？方法如下（參考自 mdn）：
根元素 (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失效的能力？
為此我做了下面乙個小實驗，基於最新的 blink 核心。可戳：
層疊上下文對 fixed 定位的影響（不同瀏覽器下表現可能不一樣）
我們設定兩個父子 div，子元素fixed定位，通過修改父元素生成層疊上下文，觀察子元素的fixed定位是否不再相對視口。
.container
.fixed
position:fixed失效，但也不止transform會使position:fixed失效。
所以，mdn 關於position:fixed的補充描述不夠完善。下述 3 種方式目前都會使得position:fixed定位的基準元素改變（本文重點）：
transform屬性值不為 none 的元素
perspective值不為 none 的元素
在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中使用了 input 也會存在一些問題，這個有很多文章都描述過並且存在很多解決方案，本文不討論這塊問題。
這方面的問題，可以看看這篇文章：移動端web頁面使用position:fixed問題總結
系列 css 文章彙總在我的 github ，持續更新，歡迎點個 star 訂閱收藏。
好了，本文到此結束，希望對你有幫助 :)
如果還有什麼疑問或者建議，可以多多交流，原創文章，文筆有限，才疏學淺，文中若有不正之處，萬望告知。
乙個gpio 不受控制的bug
前幾天除錯乙個flash燈的驅動程式，這可ic 有兩個控制pin，乙個叫en1 乙個叫en2，根據spec的說明，不同的組合將產生不同的輸出電流。但我發現，那個en1 這個pin 死活是拉不高的，於是開始拼命的檢視我的 是不是有什麼邏輯上的錯誤，但是很不幸，沒有找到，於是一直跟 直到查到控制gpio...
前端筆記，table標籤中td寬度不受控制的坑
在table標籤中，td的寬度設定好後，是沒有用的，因為table是乙個整體，他的td寬度是由其中乙個最長td寬度決定的，原因是瀏覽器預設情況下，如果有乙個單詞很長，導致一行剩下的空間放不下，則瀏覽器會把這個單詞挪到下一行去。但是如果新行還是放不下，則會溢位，就會變成下面的樣子，如圖所示 這時候只要...
真相 資料中心的電力使用量不受控制
隨著2016年的到來，行業專家一直在 政治和技術的發展和變化將如何改變2016年的資料中心，但從另外乙個角度看，人們卻沒有聽到很多關於其電能使用的前景與計畫。每個人都喜歡談論個別資料中心的效率，或者他們的資料中心使用可再生能源的比例。卻沒有人談論資料中心所使用的總能量，因為所得到的資料是令人討厭和沮...