html css 偽元素 z-index

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

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

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

----

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

王淳藝 Celia Wang