要控制哪個(gè)重疊的網(wǎng)頁元素出現(xiàn)在頂部，請(qǐng)使用帶有定位元素的CSS Z-INDEX屬性。 z索引分配了一個(gè)堆疊順序，其中較高的值出現(xiàn)在較低的值之上，但僅適用於將位置設(shè)置為相對(duì)，絕對(duì)，固定或粘性的元素。堆疊上下文也會(huì)影響分層 - 孩子元素限制在父母的上下文中，這意味著在另一個(gè)上下文中，一個(gè)上下文中的高z指數(shù)仍可能出現(xiàn)在另一個(gè)上下文中的元素後面。實(shí)用的提示包括使用較小的增量值（例如10、20、30），避免不必要的堆疊，檢查與第三方庫(kù)的衝突以及跨瀏覽器的測(cè)試。如果z索引不起作用，請(qǐng)驗(yàn)證元素是否正確定位，並檢查是否有衝突的堆疊上下文。

當(dāng)網(wǎng)頁上的元素重疊時(shí)，您如何控制哪一個(gè)出現(xiàn)在頂部？這就是CSS中z-index屬性發(fā)揮作用的地方。一開始似乎很簡(jiǎn)單，但是如果您不謹(jǐn)慎地設(shè)置HTML結(jié)構(gòu)和定位，這可能會(huì)變得很棘手。

讓我們分解有關(guān)使用z-index所需的知識(shí)。

z-index實(shí)際上在做什麼

z-index屬性控制著位置的元素的堆疊順序，這意味著它們具有relative ， absolute ， fixed或sticky的位置值。具有較高z-index值的元素將出現(xiàn)在較低的元素之前。

例如：

 。盒子 {
  位置：相對(duì)；
  z索引：2;
}

此.box元素將位於任何其他位置的元素上方， z-index z-index小於2。如果您嘗試將其應(yīng)用於靜態(tài)元素（默認(rèn)），則不會(huì)做任何事情。

所以記?。?/p>

• 在z-index之前使用position
• 值可能為負(fù)，零或正整數(shù)
• 瀏覽器在頂部呈現(xiàn)更高的數(shù)字

堆疊上下文的工作方式

z-index最令人困惑的部分之一是了解堆疊上下文。堆疊上下文就像一個(gè)圖層組一樣 - 創(chuàng)建一個(gè)元素（例如，通過給元素為z-index ），其所有子元素都會(huì)在該上下文中堆疊。

這在實(shí)踐中意味著什麼：

• 一個(gè)堆疊上下文中具有較高z-index的子元素仍可能出現(xiàn)在另一個(gè)元素後面，即使該元素的z-index較低
• 因此，如果父母有z-index: 10 ，而兄弟姐妹的父母則具有z-index: 5 ，那麼無論您設(shè)置了第一個(gè)父母的孩子的z-index ，它都不會(huì)超過第二個(gè)父母的孩子

您並不總是需要擔(dān)心堆疊上下文，但是當(dāng)事情沒有按照您的期望堆疊方式時(shí)，這通常就是原因。

使用z-index實(shí)用提示

以下是一些現(xiàn)實(shí)世界的技巧，可以控制您的圖層：

• 使用小值：您不需要從99999開始。從1開始並根據(jù)需要增加。它使事情井井有條。
• 小組相關(guān)值：例如使用10、20、30代替1、2、3-為您提供了以後插入某些內(nèi)容的空間。
• 避免不必要的堆疊：僅當(dāng)您真正需要更改堆疊順序時(shí)，才使用z-index 。
• 請(qǐng)注意第三方庫(kù)：UI套件或框架可能已經(jīng)使用了自己的z-index值，因此請(qǐng)檢查是否有衝突。

另外，請(qǐng)確保跨瀏覽器進(jìn)行測(cè)試。雖然現(xiàn)代瀏覽器非常始終如一地處理z-index ，但較舊的瀏覽器（尤其是IE）的行為可能會(huì)有所不同。

當(dāng)z-index不起作用時(shí)

如果您的z-index不起作用，請(qǐng)檢查以下常見問題：

• 元素實(shí)際定位了嗎？
• 是否有z-index較低的父母創(chuàng)建新的堆疊上下文？
• 兩個(gè)要素是否是不同堆疊上下文的一部分？

一個(gè)好的技巧是暫時(shí)設(shè)置背景顏色或概述重疊元素，以便您可以視覺上查看發(fā)生了什麼。

這應(yīng)該涵蓋基本知識(shí)。 z-index似乎很簡(jiǎn)單，直到它無法按照您的預(yù)期工作，但是一旦您了解堆疊的上下文和定位，它就會(huì)變得更加可預(yù)測(cè)。

以上是CSS教程解釋了Z Index屬性的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！