CSS z-index Tailwind

一、什麼是z-index？

在介紹z-index之前，我們先了解一下疊加上下文（stacking context）的概念。疊加上下文是指一個元素及其子元素的集合，它們在3D空間中按照一定的標準順序堆疊起來。這個標準順序是，根據元素的z-index和paint order（繪製順序）進行排序。

而z-index是用來控制疊加上下文順序的屬性。它的取值可以是auto、整數、負數或0。整數和負數分別代表元素在不同的疊加上下文中的位置，而auto和0則代表默認的疊加上下文順序。

我們可以使用z-index屬性來改變元素在疊加上下文中的位置，從而改變它們之間的遮蓋關係。

<div style="background-color: #f00; position: relative; z-index: 1;">
  <p style="background-color: #fff; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 2;">hello world</p>
</div>

二、Tailwind中的z-index

Tailwind是一個快速、高效的CSS框架，它提供了一套全面的類名，可以幫助我們快速地編寫整潔的CSS樣式。在Tailwind中，我們可以使用z-XX來設置z-index屬性。

這裡的XX可以是10、20、30、40、50、auto或unset。其中，10對應着默認的z-index值，50則表示最高的z-index值。如果需要更高的z-index值，可以使用z-50，它將設置元素在疊加上下文中的堆疊順序為最前面。

<div class="z-50">
  <p class="z-10">hello world</p>
</div>

三、CSS中的z-index注意事項

雖然z-index是一個非常有用的屬性，但是在使用它的時候也需要注意一些細節：

1. z-index是在同一疊加上下文內比較元素間堆疊順序的，如果兩個元素不在同一疊加上下文內，則無法比較它們之間的層級。因此，在對元素設置z-index時要注意元素所在的位置和層級關係。

<div style="background-color: #f00; position: relative; z-index: 1;">
  <div style="background-color: #0f0; position: absolute;">
    <p style="background-color: #fff; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 2;">hello world</p>
  </div>
</div>

在上面的例子中，雖然p元素的z-index值為2，但是由於它父級元素的z-index為1，p元素和父級元素不在同一疊加上下文內，因此z-index屬性對它們之間的層級關係沒有影響。

2. 在使用z-index時，要特別注意絕對定位和浮動元素的層級關係。一般情況下，絕對定位元素的層級要高於非定位元素，而浮動元素的層級要低於非浮動元素。

<div style="background-color: #f00; position: relative;">
  <p style="background-color: #fff; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 2;">hello world</p>
  <img src="example.jpg" style="float: left; z-index: 1;">
  <p>some text</p>
</div>

在上面的例子中，儘管img元素的z-index為1，但由於它是浮動元素，因此它位於非浮動元素p之下。而p元素的堆疊順序是由父級元素的z-index決定的，因此p元素依然在p元素之上，z-index的設置無效。

3. 當兩個兄弟元素都設置了z-index時，它們的層級關係是由它們在HTML源碼中的順序來決定的。即後面的元素會覆蓋前面的元素。

<div style="background-color: #f00; position: relative; z-index: 1;">
  <p style="background-color: #0f0; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 2;">hello world</p>
  <p style="background-color: #fff; position: absolute; top: 80%; left: 50%; transform: translate(-50%, -50%); z-index: 3;">world hello</p>
</div>

在上面的例子中，由於p元素的堆疊順序是由z-index屬性決定的，因此最後一個元素world hello覆蓋了前面的元素hello world。

四、總結

z-index是控制疊加上下文順序的屬性，它可以幫助我們調整元素間的遮蓋關係。在Tailwind中，我們可以使用一系列的z-XX類名來設置z-index屬性。在使用z-index時要注意元素所在的疊加上下文、定位方式、浮動狀態等因素，以避免出現意外的結果。