day19_z-index&position&top&left

2018 iT 邦幫忙鐵人賽

DAY 19

Modern Web

挑戰 CSS 30 天系列第 19 篇

2018鐵人賽 css

小斑

2017-12-22 16:37:38

1103 瀏覽

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

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

position 屬性制定出要用哪一類的位置。可能的值有：

static (預設值): 這代表元素會被放在預設的地方。如果 position 的值是被設定為 statics 的話，那 top、bottom、left、和 right 的值就都沒有意義了。

absolute: 這代表元素會被放在瀏覽器內的某個位置 (依 top、bottom、left、和 right 的值而定)。當使用者將網頁往下拉時，元素也會跟著改變位置。

relative: 這代表元素被放的地方將會與預設的地方有所不同。不同的程度是依照 top、bottom、left、和 right 的值而定。

fixed: 這代表元素會被放在瀏覽器內的某個位置 (依 top、bottom、left、和 right 的值而定)。當使用者將網頁往下拉時，元素的位置不會改變。

每一個方向 (top, right, bottom, left) 的位置值可以是長度、百分比、或是 auto。

從以下範例可見，藍色方塊 (blueblock) 的位置：它是在離上面 20px，及左邊 20px 的地方。粉紅色方塊 (pinkblock)的位置：它是在離上面 50px，及左邊 50px 的地方。

範例：

<!DOCTYPE html>
<html>
<head>
  <title>CSS z-index&position&top&left</title>
  <meta charset="utf-8">
  <style type="text/css">
	#blueblock { 
		z-index: 2; 
		position: absolute; 
		width:80px; 
		height:100px; 
		top:20px; 
		left:20px; 
		border: 1px solid #FFF; 
		background-color: blue; 
	} 

#pinkblock { 
		z-index: 1; 
		position: absolute; 
		width:100px; 
		height:80px; 
		top:50px; 
		left:50px; 
		border: 1px solid #FFF; 
		background-color: #FF00FF; 
	}
  </style>
</head>
<body>
    <div id="blueblock"></div> 
	<div id="pinkblock"></div>
</body>
</html>

成果如下圖：