up
down
Close
架站盒子
Web Development Box
 

CSS z-index 的用法與最大值、最小值

│ 14822 Views │ CSS
CSS z-index 的用法與最大值、最小值
CSS z-index 的用法與最大值、最小值
  1. z-index 的功能
  2. 如何使用 z-index
  3. z-index 最大值與最小值
  4. z-index 語法
  5. z-index 不起作用之解決辦法

z-index 的功能

z-index 的 z 代表的是 z 軸(立體空間),因此透過 CSS 中 z-index 的最大值或最小值屬性可以將重疊的元素依照需求進行層疊排序,z-index 數字越大其物件將越上層,上層的物件可以覆蓋下層的物件。

如何使用 z-index

z-index 只用於重疊的物件,如果物件沒有重疊則無法產生堆疊效果,重疊通常是透過定位元素如positon:absolute來指定物件位置使其重疊在一起,再透過 z-index 來做堆疊,詳細 CSS 與 HTML 請參考下方作法。

如果沒有指定 z-index,那麼預設會是 auto,重疊的物件將依照 HTML 撰寫的順序覆蓋,也就是寫在越下面的 HTML 元素將會顯示在越上層。

沒有指定z-index

See the Pen z-index default css by kumo (@kumo-tw) on CodePen.

上面的範例即是沒有指定 z-index,由於藍色區塊(div1)的 HTML 是寫在最上面因此出現在最下層,如果我們要將藍色區塊移到最上方,只要在 div1 的 css 中加上 z-index 屬性即可,數字這裡我們先設為 1 。

讓藍色區塊設為1

See the Pen Untitled by kumo (@kumo-tw) on CodePen.

這樣藍色區塊就到最上面了,如果又要讓綠色區塊(div3)比藍色區塊(div1)還要上面,就在 div3 的 css 中加上 z-index,並且數字需大於 div1。

讓綠色區塊設為2

See the Pen z-index:2 CSS by kumo (@kumo-tw) on CodePen.

了解規則以後就可以在會重疊的元素上自訂層級,通常導覽列(Navigation Section)選單、廣告、返回頂部按鈕、彈出式圖片等都會在最上面,背景圖片則在最下面。

最大值與最小值

我們已經知道 z-index 可以控制物件的堆疊順序,那麼最大值與最小值分別是多少呢?請參考:

最小值 最大值
−2147483648 2147483647

超過最小值以最小值算,超過最大值以最大值算,例如「2147483647」與「2147483648」會被視為一樣大,這時候順序會由 HTML 的順序或父層順序等決定。

通常為了保留空間不會直接設最大值,避免未來又有需要更上面的物件卻沒有值可以堆上去,當然有時候會被第三方直接設最大值(比如說廣告容易被設為最大值),這時候就只能設為跟它一樣大,然後把 HTML 寫在最下面了。

z-index 語法

除了數字之外也可以用其他語法,分別如下:

語法 說明
z-index: auto; 預設
z-index: initial; 保持初始值
z-index: inherit; 繼承父層
※ 保持初始就是讓它保持自己原本的設定,不跟著父層變動。

z-index 不起作用之解決辦法

如果 z-index 沒有起到作用,表示可能沒有使用定位元素。z-index 只用於定位元素,如下:

position: absolute;
position: relative;
position: fixed;
position: sticky;
以及 flex 物件:display:flex

如果有使用定位元素卻還是沒有起到作用,通常是因為父層影響。

z-index:2
z-index:0
z-index:1
z-index:100
<div class="gold">
  <div class="blue"></div>
</div>
<div class="pink">
  <div class="green"></div>
</div>

綠色區塊已經設定為 100 卻還是比設 0 的藍色還要下面,這是因為藍色的父層是金色,金色比粉紅色大,因此粉紅色中的綠色即使設1千萬都會比藍色下面。

解決辦法是從父層去解決,把粉紅色改大於金色,或把金色改小於粉紅色,再不然就是不要放在粉紅色父層裡,改放到金色父層等,方法百百種,只要釐清原因再去對症下藥即可。

延伸閱讀

本文是否對您有幫助?