層疊樣式表定位重疊元素
使用CSS定位進行網頁佈局時遇到的一個挑戰是，某些元素可能與其他元素重疊。 如果你希望HTML中的最後一個元素處於最前面，這種方法可以正常工作，但是如果你不想或者如果你想擁有目前沒有與其他元素重疊的元素，那麼該怎麼辦？因為設計需要這種“分層”的外觀？ 為了改變元素重疊的方式，你需要使用CSS的屬性。
如果您在Word和PowerPoint中使用過圖形工具，或者使用了更強大的圖像編輯器（如Adobe Photoshop），那麼您很可能會看到類似z-index的操作。 在這些程序中，您可以突出顯示您繪製的對象，然後選擇一個選項來“發送回”或“帶到”文檔的某些元素。 在Photoshop中，您沒有這些功能，但您確實擁有該程序的“圖層”窗格，並且可以通過重新排列這些圖層來安排元素在畫布中的位置。 在這兩個例子中，你基本上都是設置這些對象的z索引。
什麼是Z指數？
當您使用CSS定位來定位頁面上的元素時，您需要三維思考。 有兩個標準尺寸：左/右和上/下。 從左到右的索引被稱為x索引，而從上到下的是y索引。 這就是你如何使用這兩個索引水平或垂直定位元素。
在進行網頁設計時，還有頁面的堆疊順序。 頁面上的每個元素可以分層在任何其他元素的上方或下方。 z-index屬性確定每個元素在堆棧中的位置。 如果x-index和y-index是水平線和垂直線，那麼z-index是頁面的深度，基本上是第三維。
我喜歡將網頁上的元素視為紙片，而將網頁本身視為拼貼。 我放置論文的位置取決於定位，其他元素覆蓋了多少是z-索引。
z-索引是一個數字，可以是正數（例如100）或負數（例如-100）。 默認的z-index為0.具有最高z-索引的元素位於最上方，接著是下一個最高位置，以此類推直到最低的z-索引。 如果兩個元素具有相同的z-index值（或者它沒有被定義，意味著使用默認值0），瀏覽器將按照它們在HTML中出現的順序對它們進行分層。
如何使用z-index
為堆棧中的每個元素指定一個不同的z-index值。 例如，如果我有五個不同的元素：
- 元素1 -z的索引-25
- 元素2 -Z-索引82
- 元素3 - z-index未設置
- 元素4 - z-索引為10
- 元素5 - z-index為-3
它們將按以下順序堆疊：
- 元素2
- 元素4
- 元素3
- 元素5
- 元素1
我建議使用完全不同的z-index值來堆疊元素。 這樣，如果稍後將更多元素添加到頁面中，則無需調整所有其他元素的z-index值即可將它們分層。 例如：
- 100為我最重要的元素
- 0為我的中間元素
- -100為我的底部元素
您也可以給兩個元素使用相同的z-index值。 如果這些元素被堆疊，它們將按照它們在HTML中編寫的順序顯示，最後一個元素在頂部。
值得注意的是，對於有效使用z-index屬性的元素，它必須是塊級元素，或者在CSS文件中使用“block”或“inline-block”顯示。
Jennifer Krynin的原創文章。 由Jeremy Girard於12/09/16編輯。