CSS overflow:auto失效了，父元素z-index負值是元兇嗎？

CSS滾動條失效排查： overflow: auto失效原因及解決方案

在CSS中，使用overflow: auto屬性創建滾動條時，有時會遇到滾動條顯示但無法滾動的問題。本文將分析一個案例，並提供解決方案。

問題描述：一個設置了overflow: auto的容器，內容高度超出容器，滾動條出現，但無法滾動。該容器的父元素z-index屬性值為負數。

問題代碼片段：

 height: 250px;
box-sizing: border-box;
border-bottom: 1px solid #000;
background-color: #eee;
overflow: auto;
scroll-snap-type: y mandatory;
position: relative;
z-index: 99;

該容器高度為250px，設置了overflow: auto ，但由於父元素的z-index為負值，導致滾動失效。

原因分析： z-index控制元素的堆疊順序。負z-index值表示元素位於其他元素下方。父元素的負z-index可能遮擋子元素，使其無法響應用戶交互，即使子元素z-index為正值。

解決方案：檢查父元素的z-index ，將其設置為非負值，或調整父元素和子元素的z-index值，確保子元素可見並可交互。

可正常滾動的示例代碼：

<div class="box">
  <div>123</div>
  <div>123</div>
  <!-- ... more divs ... -->
</div>

.box {
  height: 150px;
  box-sizing: border-box;
  border-bottom: 1px solid #000;
  background-color: #eee;
  overflow: auto;
  scroll-snap-type: y mandatory;
  position: relative;
  z-index: 99;
}

此示例中，容器可正常滾動，關鍵在於確保父元素的z-index不影響子元素的顯示和交互。 確保父元素的z-index值不與子元素衝突是解決問題的關鍵。

以上是CSS overflow:auto失效了，父元素z-index負值是元兇嗎？的詳細內容。更多資訊請關注PHP中文網其他相關文章！