iframe 阻止 z-index 工作？

Question

我一直在嘗試使用 z-index css 屬性使一個元素始終位於另一個元素的前面，但它不起作用。 一個元素的 z-index 明顯大於另一個元素的 z-index，但它仍然位於另一個元素的后面。 可能是因為其中一個元素（出現在前面的元素）是 iframe 嗎？ 有沒有人有其他建議？

Answer 1

對於那些后來到這里的人，正確的答案是放置position: relative; 或有問題的元素上的任何其他position道具。

我的建議是將其放在與問題相關的每個元素上：

position: relative;
z-index: 0;

然后在 iframe 前面的最后一個元素上增加z-index 。

如果你這樣做，你將很快開始獲勝。

在我的測試中， z-index僅在您明確設置position時才有效。 通過調節z-index值來測試它，然后嘗試通過單擊鼠標來突出顯示屏幕上的文本。 您應該會看到圖層按預期運行或非常不正確的證據。

我發現如果您按F12 （在 Chrome 中打開開發窗格）然后單擊左上角的“檢查”按鈕或按CTRL + SHIFT + C ，則效果很好。 然后您可以將鼠標懸停在所有內容上並查看它們的堆疊上下文相對於相鄰元素的情況。

UX 獎勵提示：請記住，用戶可能想要復制文本，因此請確保他們可以選擇它。

如果您遇到問題，很可能您是：

1. 缺失position: relative; 在元素的父元素上，或
2. 缺少z-index: 0; 某處

Answer 2

請記住，z-index 索引只計算絕對元素。 兩個元素都應該有位置：絕對。 CSS 2.1 規范中的更多信息