CSS z-index 導致 onmouseover 事件失效的解決方案

在開發網頁互動效果時，經常會遇到滑鼠事件（如 onmouseover）無法觸發的問題。這通常是因為元素被其他層級較高的元素覆蓋，導致無法捕獲滑鼠事件。本文記錄一個典型案例：透過調整 CSS z-index 屬性解決導航按鈕無法觸發懸停事件的問題。

問題現象

頁面結構包含一個輪播圖容器 .demo，內部有圖片列表 ul > li 和底部導航按鈕 .num a。雖然導航按鈕設定了 z-index: 50，但滑鼠移上去時 onmouseover 事件不觸發，點擊也無反應。檢查發現父容器 .demo 設定了 z-index: -1，導致整個容器層級低於 body，按鈕雖然視覺上在最上層，實際上被頁面背景層遮擋。

原始 CSS 代碼

.demo {
  width: 1000px;
  height: 442px;
  overflow: hidden;
  margin: 0px;
  z-index: -1; /* 問題關鍵 */
  padding: 0px;
  position: relative;
}
.num {
  bottom: 10px;
  right: 50px;
  width: auto;
  height: 8px;
  z-index: 10;
  position: absolute;
}
.num a {
  cursor: pointer;
  width: 8px;
  height: 8px;
  background: url(../images/bicon_bg.png) no-repeat bottom;
  margin-right: 4px;
  float: left;
  display: inline-block;
  border: 1px solid red;
  position: relative;
  z-index: 50;
}

解決方法

移除 .demo 的 z-index: -1，或將其設定為大於 0 的值（如 z-index: 1）。因為父元素的堆疊上下文會限制子元素的最大層級，父層級為負數時，子元素再高也無法超越頁面主內容層。

.demo {
  width: 1000px;
  height: 442px;
  overflow: hidden;
  margin: 0px;
  /* z-index: -1; 註釋或刪除此行 */
  padding: 0px;
  position: relative;
}

核心原理

• 堆疊上下文：設定 position: relative/absolute/fixed 並指定 z-index 的元素會建立新的堆疊上下文。
• 層級限制：子元素的 z-index 僅在父堆疊上下文內比較，無法超越父層級在全域的層級順序。
• 負值陷阱：z-index: -1 會將元素置於父層級背景之下，甚至低於 body，導致互動元素失效。

最佳實踐建議

1. 避免在包含互動元素的容器上使用負 z-index。
2. 使用開發者工具（Elements 面板）檢查元素的實際堆疊順序（Computed > z-index）。
3. 若需背景圖層，可用 ::before 偽元素配合 z-index: -1，不影響主內容層級。

修正後，導航按鈕恢復正常懸停、點擊響應，輪播切換功能運作無誤。