在網頁開發中，我們常常需要使用z-index屬性來設置元素的層級，以控制其在頁面上的顯示先后順序。然而有時候我們會發現，即使設置了z-index，元素的顯示順序卻仍然不正確，這時就需要仔細檢查代碼來確定問題出在哪里。

通常，z-index無效可能有以下幾種原因：

1. 元素的position屬性不是absolute、fixed或relative
只有當元素的定位屬性為absolute、fixed或relative時，z-index才會生效。如果元素的定位屬性為static（默認值），則不管設置什么z-index都無效。
<div style="z-index: 1">
<p>hello world!</p>
</div>
2. 父元素的z-index值低于子元素
如果父元素和子元素都設置了z-index，但是父元素的z-index值比子元素的低，則子元素的z-index值會覆蓋父元素的，導致z-index失效。
<div style="z-index: 1">
<div style="z-index: 2">
<p>hello world!</p>
</div>
</div>
3. 元素沒有在同一個堆疊上下文中
每個堆疊上下文內部的元素z-index值是相對于該堆疊上下文而言的，不同堆疊上下文內部的z-index值互相獨立。如果元素沒有在同一個堆疊上下文中，設置的z-index也會無效。
<div style="position: relative; z-index: 1">
<p>hello world!</p>
</div>
<div style="position: absolute; z-index: 2">
<p>hello world!</p>
</div>
4. 元素被父元素或祖先元素遮擋
如果元素被父元素或祖先元素遮擋，那么無論設置什么z-index都無法生效。這時需要尋找遮擋元素并把其設置為透明或將遮擋元素移除。
<div style="z-index: 1; background-color: red; width: 100px; height: 100px"></div>
<div style="z-index: 2; background-color: blue; width: 50px; height: 50px; position: relative; left: 80px; top: -50px"></div>
<div style="z-index: 3; background-color: green; width: 50px; height: 50px; position: relative; left: 20px; top: -50px"></div>

總之，使用z-index時需要注意元素的定位屬性、父元素的z-index值、堆疊上下文以及遮擋關系等因素，才能確保z-index的生效。