詳解CSS不受控制的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 元素在一條假想的相對於面向(電腦螢幕的)視窗或者
概念比較抽象,簡單理解,記住生成了 Stacking Context 的元素會影響該元素的層疊關係與定位關係。
關於生成了 Stacking Context 的元素會影響該元素的層疊關係這一點,具體可以看看這篇文章層疊順序(stacking level)與堆疊上下文(stacking contewww.cppcns.comxt)知多少?
而本文提到了生成了 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.opacitywww.cppcns.com 屬性值小於 1 的元素(參考 thoOpdhe 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 定位的影響(不同瀏覽器下表現可能不一樣)
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,.8);
}
.fixed {
position: fixed;
top: 1vw;
left: 1vw;
right: 1vw;
bottom: 1vw;
background: rgba(100,255,.8);
}
.g-absolute {
position: absolute;
z-index: 10;
}
.g-flex {
display: flex;
z-index: 10;
}
.g-opacity {
opacity: .5;
}
.g-transforwww.cppcns.comm {
transform: translate3d(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; }); })();
我們設定兩個父子 div,子元素fixed定位,通過修改父元素生成層疊上下文,觀察子元素的fixed定位是否不再相對視口。
<div class="container"> <div class="fixed"> </div> </div>
最初的 CSS :
.container { width:10vw; height: 10vw; background: rgba(255,.8); } .fixed { position: fixed; top: 1vw; left: 1vw; right: 1vw; bottom: 1vw; background: rgba(100,.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 也會存在一些問題,這個有很多文章都描述過並且存在很多解決方案,本文不討論這塊問題。
以上就是詳解CSS不受控制的position fixed的詳細內容,更多關於CSS不受控制的position fixed的資料請關注我們其它相關文章!