:::
prev17. position(位置)
Html+CSS(2015-10)

18. z-index

z-index 屬性是用來決定元素重疊的順序。換言之，當兩個元素有重疊的情況時，z-index 值將會決定哪一個元素在上面。z-index 值比較大個元素會被放在上面。

舉例來說，假設我們有以下的 CSS 碼：

 

#redblock { 
  z-index: 1; 
  position:  absolute; 
  width:80px; 
  height:100px; 
  top:20px; 
  left:20px; 
  border: 1px solid #FFF000; 
  background-color: #FF0000; 
} 

#pinkblock { 
  z-index: 2; 
  position: absolute; 
  width:100px; 
  height:80px; 
  top:50px; 
  left:50px; 
  border: 1px solid #FFF000; 
  background-color: #FF00FF; 
}

 

以下的 HTML 碼，

 

<div id="redblock"></div> 
<div id="pinkblock"></div>

 

從以上可見，粉紅色方塊 (pinkblock) 的 z-index 值 (2) 比紅色方塊 (redblock) 的 z-index 值 (1) 高，因此粉紅色方塊在上面。

prev17. position(位置)

友善列印 & 下載 PDF 匯出 MarkDown 格式

:::

語系選擇

學校簡介

校長室
教務處
學務處
總務處
輔導室
家長會
媒體報導
北小臉書
北小附幼臉書
課程計畫平台

主選單