z-index 第一頁

z-index 1

設定重疊的元素矩形格子其層次，可設為：

1. 整數：元素矩格在重疊堆（stack）中的層次，可用負值。展現時數字大的在上，會蓋住數字小的。元素內的子元素不論是否設定 z-index，與父元素放在同一層，不須與外界的元素相比。同層的元素依先後次序堆疊，後來的蓋過先來的。
2. auto：等同於 0 層，元素矩格的層次與父元素相同。元素內的子元素其 z-index 設為整數時，會與父元素及外界的元素相比。此為預設值。
3. inherit：繼承父元素的特徵值。

要將多個元素重疊，要用到 position 特徵的 relative, absolute, fixed，及 top, right, bottom, left 四個特徵。z-index 必須配合 position 設為 relative, absolute, fixed 使用；其它情形 z-index 沒有效果，一律等同於 0 層。使用時要注意 IE6 沒支援 position:fixed。

使用整數設定層次。 <style type='text/css'> .d0 {height:220px;font-size:16px} .d1 {position: relative; top:20px; width:160px; height:160px; background:red; } .d2 {position: relative; top:-200px; left:-10px; width:160px; height:160px; background:blue; } </style> <br /><br /> <div class=d0> <div class='d1'> </div> <div class='d2'> </div> </div> <br /> <div class=d0> <div class='d1' style='z-index:3'> z-index:3 </div> <div class='d2' style='z-index:-2'> z-index:-2 </div> </div>

• 風格用法：

  <style type='text/css'>
  .d0 {height:220px;font-size:16px}
  .d1 {position: relative;
       top:20px;
       width:160px;
       height:160px;
       background:red;
      }
  .d2 {position: relative;
       top:-200px;
       left:-10px;
       width:160px;
       height:160px;
       background:blue;
      }
  </style>
  <br /><br />
  <div class=d0>
    <div class='d1'>
    </div>
    <div class='d2'>
    </div>
  </div>
  <br />
  <div class=d0>
    <div class='d1' style='z-index:3'>
  z-index:3
    </div>
    <div class='d2' style='z-index:-2'>
  z-index:-2
    </div>
  </div>
  

• 執行結果：
  
  
  
  
  
  z-index:3

  z-index:-2

• 上面第一組圖案沒有設 z-index，後來的蓋在先來的上面。第二組圖案有設 z-index，數值大的在上。

z-index（你正在看 第一頁）

:

第一頁

第二頁

第三頁