我菜單為什么跟著滑動了？！！—— 固定定位為什么會失效？
背景：最近在寫一個H5頁面項目，頭部有個菜單欄，需要固定在頂部不動，但是滑動之后設(shè)置并沒有生效，之前開發(fā)中也遇到過類似的固定失效的情況，就去詳細了解了下有哪些可能導致固定定位失效的情況。希望有些場景能幫助到你。下面我總結(jié)和詳細說明了會導致失效的情況，那么我們接著往下看...
背景：最近在寫一個H5頁面項目，頭部有個菜單欄，需要固定在頂部不動，但是滑動之后設(shè)置并沒有生效，之前開發(fā)中也遇到過類似的固定失效的情況，就去詳細了解了下有哪些可能導致固定定位失效的情況。希望有些場景能幫助到你。下面我總結(jié)和詳細說明了會導致失效的情況，那么我們接著往下看...
html代碼：（所有情況通用，以下不重復展示）
<body>
<div class="parents">
<div class="fixed">頂部固定菜單欄</div>
<div class="scrollDiv">我定不住啊師傅！！</div>
</div>
</body>
祖先元素的 CSS 變換（transform）、透視（perspective）或濾鏡（filter）屬性導致
如果一個元素的任何祖先元素應用了 transform、perspective 或 filter 屬性等，這個元素的固定定位將相對于最近的具有變換的祖先元素進行定位，而不是相對于視口。
css代碼：
* {
margin: 0;
padding: 0;
}
.parents {
// 轉(zhuǎn)換
transform: translateY(10px)
}
.fixed {
width: 100%;
position: fixed;
top: 0px;
left: 0px;
background-color: pink;
text-align: center;
}
.scrollDiv {
width: 100%;
height: 2000px;
background: skyblue;
}
- 當內(nèi)容區(qū)域高度超出發(fā)生滾動時，我們在頂部固定定位的菜單欄是沒法固定住，會隨著滾動往上走。如下圖：
以下其他情況示例圖一樣，我們就不做多展示，直接給出示例代碼
父元素使用了 will-change 屬性
類似于 transform，使用 will-change 也可導致固定定位相對于此屬性設(shè)置的元素，而非相對于視口。
- 設(shè)置transformZ(0) 可以啟動滑動加速，但是如果頁面中有使用到固定定位，則會導致固定定位失效，原因是設(shè)置transformZ會使得被設(shè)置的元素脫離了文檔流。
css代碼示例：
.scrollDiv {
will-change: transform;
}
.fixed {
position: fixed;
top: 10px;
left: 10px;
background-color: red;
}
z-index
- 雖然
z-index不會導致固定定位“失效”，但如果其他元素的z-index值更高，固定定位的元素可能會被覆蓋。確保合理設(shè)置z-index值，使得固定定位的元素在視覺上出現(xiàn)在頁面的頂層。
.fixed {
position: fixed;
top: 10px;
left: 10px;
background-color: red;
z-index: 1;
}
.scrollDiv {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
z-index: 2;
}
能滾動的元素使用了 -webkit-overflow-scrolling
- 這個在 iOS 設(shè)備上會出現(xiàn)，如果在祖先元素上使用了 `-webkit-overflow-scrolling: touch;可能會影響固定定位元素的行為。
css代碼：
.scrollDiv {
width: 100%;
height: 2000px;
background: skyblue;
-webkit-overflow-scrolling: touch;
}
視口單位（vh、vw）與固定定位結(jié)合使用
- 正常情況下是沒有問題的，但是當使用視口單位（如
vh、vw）來設(shè)置固定定位元素的大小或位置時，在虛擬鍵盤彈出或地址欄顯示/隱藏時可能會有問題。
css代碼：
.fixed {
position: fixed;
top: 10vh; /* 10% of viewport height */
left: 10vw; /* 10% of viewport width */
background-color: red;
}
打印或預覽模式
在打印或打印預覽模式中，固定定位可能不會按預期工作，因為許多瀏覽器在打印時會忽略固定定位。
移動設(shè)備上的兼容性問題
一些移動設(shè)備上的瀏覽器對 fixed 定位的支持可能存在問題，尤其是當鍵盤彈起或處理復雜的頁面交互時。
屏幕閱讀器和輔助技術(shù)
使用屏幕閱讀器等輔助技術(shù)時，fixed 定位可能不會以預期的方式呈現(xiàn)。
寫在后邊
布局定位涉及到很多設(shè)備兼容的問題，有很多特殊場景我們可能并沒有解釋到。可能有些標準用法在某個設(shè)備上也會有異常，只是我們只需要兼容大多數(shù)，然后去解決必須兼容的設(shè)備。我們的開發(fā)就是不斷完善+解決bug。
最后你有遇到過什么其他原因?qū)е露ㄎ皇〉膯幔炕蛘吣阌心男╅_發(fā)中奇葩的樣式問題。歡迎評論區(qū)討論！
浙公網(wǎng)安備 33010602011771號