我選單為什麼跟著滑動了？！！—— 固定定位為什麼會失效？

雾散声声慢發表於2024-08-02

背景：最近在寫一個H5頁面專案，頭部有個選單欄，需要固定在頂部不動，但是滑動之後設定並沒有生效，之前開發中也遇到過類似的固定失效的情況，就去詳細瞭解了下有哪些可能導致固定定位失效的情況。希望有些場景能幫助到你。下面我總結和詳細說明了會導致失效的情況，那麼我們接著往下看...

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 {
	  // 轉換
      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;
    }
  • 當內容區域高度超出發生滾動時，我們在頂部固定定位的選單欄是沒法固定住，會隨著滾動往上走。如下圖：

以下其他情況示例圖一樣，我們就不做多展示，直接給出示例程式碼

父元素使用了 will-change 屬性

類似於 transform，使用 will-change 也可導致固定定位相對於此屬性設定的元素，而非相對於視口。

  • 設定transformZ(0) 可以啟動滑動加速，但是如果頁面中有使用到固定定位，則會導致固定定位失效，原因是設定transformZ會使得被設定的元素脫離了文件流。

css程式碼示例：

   	.scrollDiv {
      will-change: transform;
    }
    .fixed {
      position: fixed;
      top: 10px;
      left: 10px;
      background-color: red;
    }

z-index

  • 雖然 z-index 不會導致固定定位“失效”，但如果其他元素的 z-index 值更高，固定定位的元素可能會被覆蓋。確保合理設定 z-index 值，使得固定定位的元素在視覺上出現在頁面的頂層。
    .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 裝置上會出現，如果在祖先元素上使用了 `-webkit-overflow-scrolling: touch;可能會影響固定定位元素的行為。

css程式碼：

 .scrollDiv {
      width: 100%;
      height: 2000px;
      background: skyblue;
     -webkit-overflow-scrolling: touch;
  }

視口單位（vh、vw）與固定定位結合使用

  • 正常情況下是沒有問題的，但是當使用視口單位（如 vh、vw）來設定固定定位元素的大小或位置時，在虛擬鍵盤彈出或位址列顯示/隱藏時可能會有問題。

css程式碼：

.fixed {
      position: fixed;
      top: 10vh; /* 10% of viewport height */
      left: 10vw; /* 10% of viewport width */
      background-color: red;
}

列印或預覽模式

在列印或列印預覽模式中，固定定位可能不會按預期工作，因為許多瀏覽器在列印時會忽略固定定位。

移動裝置上的相容性問題

一些移動裝置上的瀏覽器對 fixed 定位的支援可能存在問題，尤其是當鍵盤彈起或處理複雜的頁面互動時。

螢幕閱讀器和輔助技術

使用螢幕閱讀器等輔助技術時，fixed 定位可能不會以預期的方式呈現。

寫在後邊

佈局定位涉及到很多裝置相容的問題，有很多特殊場景我們可能並沒有解釋到。可能有些標準用法在某個裝置上也會有異常，只是我們只需要相容大多數，然後去解決必須相容的裝置。我們的開發就是不斷完善+解決bug。

最後你有遇到過什麼其他原因導致定位失敗的嗎？或者你有哪些開發中奇葩的樣式問題。歡迎評論區討論！

相關文章