iT邦幫忙

第 11 屆 iT 邦幫忙鐵人賽

DAY 29
1
Modern Web

重新認識 CSS系列 第 29

重新認識 CSS - z-index & stacking context

前言

「重新認識 CSS」這個系列名稱的由來就如其名,我想要重新認識它。雖然以前就有學過 CSS,但這次想從 CSS Spec 中學到最原始的定義和內容,更加了解 CSS 的原理,讓我在切版的時候可以更加確定自己在做什麼,我踩到的雷只是因為我不夠了解它才會炸開。

在這 30 天的內容中,會將 Spec 內看到的資料整理成這個系列,也希望正在學 CSS 的各位可以更加了解它。另外我也會同時將文章發至我的 Blog,如果想直接看文內的程式碼 Demo 畫面,可以到我的 Blog 來看。

「重新認識 CSS」系列文章發文於:

從 CSS 2.1 開始,每個 box 在三維空間上都有一個位置,除了水平和垂直的位置之外,這些 box 還會沿著 z 軸來排列,讓一個 box 可以疊在另一個 box 的上面,這個概念就類似於圖層。

當使用者面對螢幕時,元素的 z-index 屬性設定的數值愈大,則該元素就會愈靠近使用者。

z-index 屬性

下面是 z-index 屬性的定義表:

  • 此元素的 initial value 為 auto
  • 只適用於定位元素,也就是元素的 position 屬性不為預設值 static,包括:absoluterelativefixed
  • 此元素為不可繼承屬性

z-index 屬性是對 positioned box 指定了:

  • 當前 stacking context 中 box 的 stack level
  • 該 box 是否建立 stacking context

下面介紹各屬性值:

  • <integer>:該整數是當前 stacking context 中產生的 box 的 stack level。該 box 還建立了一個新的 stacking context
  • auto:當前 stacking context 中產生的 box 的 stack level 為 0。如果該 box 是 position: fixed 或是 root,則它還會建立新的 stacking context

stacking context

  • render tree 繪製 (painted) 到 canvas 上的順序是根據 stacking context 來決定的
  • 每個 box 都屬於一個 stacking context,並且每個定位的 box 都有一個整數的 stack level
    • stack level:代表該 box 在 z 軸上相對於同一個 stacking context 中其他 stack level 的位置
  • stack level 較高的 box 會在 stack level 較低的 box 前面
  • box 的 stack level 可能為負數
  • 在 stacking context 中,stack level 相同的 box 會根據 document tree 的順序來堆疊 (stacked),也就是越寫在 HTML 後面的元素會蓋住前面的元素
  • stacking context 可以包含其他 stacking context

如以下範例:

<div class="box box1">box1</div>
<div class="box box2">box2</div>
.box {
  width: 100px;
  height: 100px;
  font-size: 36px;
}
.box1 {
  background-color: lightblue;
  margin: 0 0 -50px 50px;
}
.box2 {
  background-color: lightslategray;
}

Demo:Codepen 連結

.box2 元素在 .box1 元素之後,所以 .box2 元素會蓋住 .box1 元素:

資料來源:


上一篇
重新認識 CSS - visibility
下一篇
重新認識 CSS - 總結 & 系列目錄
系列文
重新認識 CSS30

尚未有邦友留言

立即登入留言