html css 偽元素 z-index

CSS：那些踩過的坑教會我的事-02

王淳藝 Celia Wang 2022/11/28 09:44:23

2 1307

今天來分享幾個在切版時遇過的神秘狀況第二彈，除了分享其中的原因外，也提出解決的方法。

----

NO.1 background永遠在最底層

- 狀況：

在這邊可以看到，左邊的飛機裝飾延伸的線條沒有被壓在黃色旗幟背景底下，而理想狀況應該是大標題連同底圖都需要壓在飛機圖案上才正確。

以下來看看這一塊的架構與css。

html:

<div class="section-title">
   <div class="title">
       <h1>我是大標題 : )</h1>
   </div>
</div>

css:

.section-title {
  text-align: center;
  transform: translate(0, -40px);
  .title {
    display: inline-block;
    margin: 0 auto;
    position: relative;
    z-index: 1;
    background: url("../images/img-section-title-bg.png") center no-repeat;
    background-size: 100%;
    width: auto;
    height: 100%;
    padding: 25px 50px;
    &::before {
      content: "";
      background: url("../images/img-section-title-deco.png") center no-repeat;
      background-size: 100%;
      width: 340px;
      height: 100%;
      position: absolute;
      top: -10px;
      left: -230px;
      z-index: -1;
    }
    h1 {
      margin: 0;
    }
  }
}

由此可看出，目前這個例子是把黃色旗幟底圖 (img-section-title-bg.png) 以 background-image 的方式寫在 .title 這一層上，

而飛機裝飾 (img-section-title-deco.png) 是以 ::before 偽元素的方式寫在 .title 同一層上，

由於 background 在層級上永遠都位於最底層，因此就算將 ::before 下了 z-index: -1 也無法將黃色旗幟蓋過 ::before。

- 解決：

基於以上的情況我們可以知道，如果 background 需要蓋在某個元素上方的話，要避免 background 與該元素位於同一層，

因此我們可以有以下幾種解決方法：

1. 將黃色旗幟底圖 (img-section-title-bg.png) 寫在 h1 上面，如此就是將黃色旗幟底圖與飛機裝飾的 ::before 放在不同層。

2. 將黃色旗幟底圖 (img-section-title-bg.png) 同樣以偽元素 ::after 寫在 .title 這一層上，且順序在 ::before 之後，並同樣下 z-index: -1 就不會遮蓋住 h1 的文字，又能夠蓋住飛機裝飾。

NO.2 下了z-index卻沒有作用

- 狀況：

在裝飾性元素彼此之間常常有上下堆疊的相對關係，在這個例子中，我們將紫色的元素下了大於綠色元素100倍的z-index，卻還是被蓋過去，那這個狀況首先我們需要先了解 "z-index" 與 "stacking-context 堆疊環境" 的關係。

在網頁上的元素都是以上→下、左→右的順序去排列，如果想調整這樣子的順序，就需要使用到 position 的 relative、absolute、fixed 等等屬性來指定元素之間重新排列，如此一來就會產生一個新的堆疊環境，而此堆疊環境就會跟著影響到 z軸的排列順序了。

z-index 為影響某元素所在範圍的堆疊環境中的堆疊順序，因此需要在同一個堆疊環境中才可比較各自子元素中的排列順序，並只在position-box中生效，意即需要搭配在 position 不為預設值 (static) 的元素上使用。

- 解決：

由上範例圖可得知，兩個圓圈分別為粉、灰兩個不同的容器中的子元素，因此兩者是存在在不同的堆疊環境中的。

而粉色容器的 z-index 為2，灰色容器的 z-index 為1，在父層的堆疊順序上粉色永遠贏過灰色，因此無論紫色圓圈的 z-index 多大都無法壓過綠色圓圈。

由此我們可以有兩個解法：

1. 粉色與灰色的父層容器皆不設定 z-index ，如此便在一樣的基準上進行子元素的比較，此時紫色圓圈 z-index 較大，即可蓋過綠色圓圈。

2. 將灰色父層容器設定 z-index >2 ，如此便可讓灰色容器的堆疊順序贏過粉色容器，其中的紫色圓圈此時無論z-index設定多少，都會蓋過綠色圓圈。

了解的其中原因之後只需要注意，未來若又發生元素之間的堆疊產生不如預期的狀況，可先檢查父層之間的堆疊順序。

----

參考資料：

https://blog.weibbb.com/2016/06/z-index.html

https://ithelp.ithome.com.tw/articles/10204689

https://medium.com/schaoss-blog/%E5%89%8D%E7%AB%AF%E4%B8%89%E5%8D%81-04-css-z-index-%E8%88%87-stacking-context-%E7%9A%84%E9%97%9C%E4%BF%82%E6%98%AF%E4%BB%80%E9%BA%BC-d29076c9b545