掌握CSS中的z索引

CSS中的z-index屬性：掌控頁面元素層疊順序的利器

本文探討CSS中的z-index屬性，它用於控制頁面元素的層疊順序。數值較高的元素會顯示在數值較低的元素之上。這類似於頁面上的x軸和y軸分別控制元素的水平和垂直位置，z-index則控制元素在z軸上的堆疊順序。

關鍵要點：

• CSS中的z-index屬性控制頁面元素的堆疊順序，數值越高，元素顯示在越上面。它僅作用於position屬性值為absolute、relative或fixed的元素。
• 通過設置position: relative，且不為top、right、bottom或left屬性賦值，即可控制元素的堆疊順序，而無需改變其在頁面上的原始位置。
• z-index值的解析在其父級堆疊上下文內進行，這意味著即使元素的z-index值較高，如果其父容器的z-index值較低，該元素仍可能顯示在其他元素之下。
• 為提高組織性和靈活性，建議使用100的增量設置z-index值。這種方法在兩個現有層之間添加新層時，提供了99個可用的數值選擇。

默認堆疊順序

在編寫HTML時，文檔中靠後的元素默認會堆疊在靠前的元素之上。

<header class="site-header"></header>
<main class="site-content"></main>
<footer class="site-footer"></footer>

在這個HTML片段中，如果所有元素都設置為重疊，則頁腳會堆疊在主體內容之上，主體內容又會堆疊在頁眉之上。

通過結合position屬性和top、right、bottom、left偏移屬性，可以使元素重疊。

如果將每個元素的position屬性設置為absolute，它們將全部重疊。由於頁腳在文檔中最後出現，因此默認情況下會堆疊在前面兩個元素之上。

.site-header, .site-content, .site-footer {
  position: absolute;
  width: 400px;
  padding: 20px;
}
.site-header {top: 0; left: 0;}
.site-content {top: 50px; left: 50px;}
.site-footer {top: 100px; left: 100px;}

使用偏移屬性top和left，可以更清晰地看到元素的堆疊順序。

堆疊上下文

雖然使用position: absolute可以創建重疊的元素，但這並沒有創建所謂的堆疊上下文。

堆疊上下文可以通過以下幾種方式創建：

• 元素具有position: absolute或relative屬性，且z-index值不是auto。
• flexbox項目具有非auto的z-index值。
• 元素的不透明度(opacity)小於1。
• 元素的transform屬性設置為非none值。

創建和使用堆疊上下文的常見方法是第一種，讓我們重點關註一下。

回到之前的例子，我們有三個元素彼此重疊，但目前它們沒有z-index值。

z-index屬性允許我們控制堆疊順序。

如果我們將頁腳的z-index設置為1，主體的z-index設置為2，頁眉的z-index設置為3，則默認堆疊順序可以完全反轉。

表面上看起來很簡單：z-index值越高，元素堆疊得越高——因此z-index: 9999將始終位於z-index: 9之上。不幸的是，實際情況比這更複雜。

堆疊上下文中的z-index

<header class="site-header"></header>
<main class="site-content"></main>
<footer class="site-footer"></footer>

如果在site-content容器內添加一個盒子，並將其定位在右下角之外，我們會看到它位於綠色盒子之上，粉色盒子之下。

.site-header, .site-content, .site-footer {
  position: absolute;
  width: 400px;
  padding: 20px;
}
.site-header {top: 0; left: 0;}
.site-content {top: 50px; left: 50px;}
.site-footer {top: 100px; left: 100px;}

根據我們對z-index的了解，我們可能認為要使這個黃色盒子顯示在粉色盒子之上，我們只需為z-index設置一個更高的值。

如果我們將z-index設置為4（高於z-index: 3），我們不會看到任何變化。人們通常會嘗試使用非常大的數字（如9999）來強制堆疊，但這也沒有效果。在代碼庫中看到這樣的z-index值是一種代碼異味，因此如果可以，請盡量避免。

我們無法獲得黃色盒子位於粉色盒子之上的預期結果的原因在於z-index在堆疊上下文中的行為方式。

為了演示這一點，讓我們來看一個稍微複雜的例子，這個例子我借鑒了MDN網站。

...(此處省略了MDN例子中的HTML和CSS代碼，因為篇幅過長，但保留了關鍵的解釋部分)...

所有這些都可以通過這樣一個事實來解釋：所有z-index值都在其父堆疊上下文內解析。因為父容器.site-content的z-index值高於頁腳，所以.site-content內的所有定位元素都在該上下文中進行評估。

理解堆疊上下文內元素的堆疊順序，可以將其類比為嵌套有序列表中的子項。

這可以寫成如下：

• 頁眉：z-index: 5
• 主體：z-index: 4
  • 盒子1：z-index: 4.6
  • 盒子2：z-index: 4.1
  • 盒子3：z-index: 4.3
• 頁腳：z-index: 2

因此，即使頁眉的z-index是5，盒子1的z-index是6，它的渲染順序是4.6，仍然小於5。因此，盒子1顯示在頁眉之下。

起初這有點令人困惑，但是隨著實踐，它確實開始變得有意義了！

z-index僅適用於定位元素

如果要控制元素的堆疊順序，可以使用z-index。但是，只有當元素的position值為absolute、relative或fixed時，z-index才會生效。

使用position精確放置元素非常適合構建複雜的佈局或有趣的UI模式，但通常希望在不移動元素在頁面上的原始位置的情況下控制堆疊順序。

如果是這種情況，可以只設置position: relative，但不為top、right、bottom或left提供任何值。元素將保留在其在頁面上的原始位置，文檔流不會中斷，並且z-index值將生效。

可以使用負z-index值

分層元素通常用於構建複雜的形狀或UI組件。這通常意味著將元素彼此疊加，z-index值不斷增加。要將元素放置在另一個元素的下方，它只需要具有較低的z-index值，而該較低的值可以為負值。

這在使用偽元素並希望將其定位在其父元素內容之後時非常有用。

由於堆疊上下文的工作方式，如果:before或:after元素要定位在其父元素文本內容之後，則需要在其上設置負z-index值。

z-index策略

讓我們總結一下我在項目中應用z-index時使用的一個簡單策略。

前面我們使用了z-index值的個位數增量，但是如果要在設置為z-index: 3和z-index: 4的兩個元素之間添加一個新元素呢？您必須更改許多值——可能在整個代碼庫中，這可能會導致問題，並可能導致網站其他部分的CSS中斷。

使用100的步長設置z-index

在處理z-index時，經常會看到這樣的代碼：

<header class="site-header"></header>
<main class="site-content"></main>
<footer class="site-footer"></footer>

在我看來，這看起來很糟糕（並且在附加!important後只會變得更糟）。看到這樣的值通常表明開發人員不理解堆疊上下文，並試圖強制一層位於另一層之上。

與其使用9999、53或12之類的任意數字，我們可以系統化我們的z-index比例，並為流程帶來更多秩序。這不僅僅是因為我有開發人員強迫症。說真的。

我沒有使用z-index的個位數增量，而是使用100的增量。

.site-header, .site-content, .site-footer {
  position: absolute;
  width: 400px;
  padding: 20px;
}
.site-header {top: 0; left: 0;}
.site-content {top: 50px; left: 50px;}
.site-footer {top: 100px; left: 100px;}

我這樣做是為了保持事物的組織性，同時也注意到了項目中使用的許多不同層。另一個好處是，如果需要在兩個其他層之間添加一個新層，則可以在兩者之間選擇99個潛在的值。

在構建z-index系統時，這種手動方法非常可靠，但與Sass之類的預處理器結合使用時，可以使其更靈活。

...(此處省略了FAQs部分，因為與之前的輸出內容重複性較高)...

以上是掌握CSS中的z索引的詳細內容。更多資訊請關注PHP中文網其他相關文章！