CSS元素堆疊（z-index）

79106 閱讀 0 評論 0 點贊

因為我們直觀的以為HTML網(wǎng)頁是二維平面，因為文本、圖像或其他元素都是按照順序排列，但，實際的網(wǎng)頁是三維立體的，元素之間可能會發(fā)生堆疊（重疊），可以通過 CSS 中的 z-index 屬性來設置元素的堆疊順序。

1. z-index屬性的含義

一個元素在文檔中的層疊順序，用于確認元素在當前層疊上下文中的層疊級別。擁有更高堆疊順序的元素總是會處于堆疊順序較低的元素的前面。

（1）z-index的屬性值越高越靠前。

（2）元素可擁有負的 z-index 屬性值。

（3）z-index 跟具體數(shù)字。

（4）z-index的數(shù)值不跟單位。

如下圖所示：

z-index的屬性

如上圖所示，這個屬性的名字由坐標系統(tǒng)得來，其中從左向右是x軸，從上到下是y軸。從屏幕到用戶是z軸。在這個坐標系中，較高z-index值的元素比較低z-index值的元素離用戶更近，也就是說較高z-index值的元素最先呈現(xiàn)在用戶的視野，這會導致較高z-index值的元素覆蓋其他元素，這也稱為堆疊或疊放。

通過 z-index 屬性您可以創(chuàng)建更加復雜的網(wǎng)頁布局，z-index 屬性的可選值如下表所示：

值	描述
auto	默認值，堆疊順序與父元素相等
number	用具體數(shù)值（整數(shù)）設置元素的堆疊順序
inherit	從父元素繼承 z-index 屬性的值

關于元素的層級關系有以下幾點需要注意：

（1）對于未設置 position 屬性的元素或者 position 屬性的值為 static 時，后定義的元素會覆蓋前面的元素；

（2）對于設置有 position 屬性且屬性值不為 static 的元素，這些元素會覆蓋沒有設置 position 屬性或者 position 屬性值為 static 的元素；

（3）對于 position 屬性值不為 static 且定義了 z-index 屬性的元素，z-index 屬性值大的元素會覆蓋 z-index 屬性值小的元素，即 z-index 屬性值越大優(yōu)先級越高，若 z-index 屬性值相同，則后定義的元素會覆蓋前面定義的元素；

（4）z-index 屬性僅在元素定義了 position 屬性且屬性值不為 static 時才有效。

2. z-index應用案例

舉例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>CSS z-index</title>
		<style type="text/css">
			div{
				width: 200px;height: 200px;
				text-align: center;
				font-size: 50px;
				line-height: 200px;
				position: absolute;
				}
				
			#red{left: 100px;top: 100px;}
			#green{left: 200px;top: 200px;}
		</style>
	</head>
	<body>
		<!-- Z-index層疊性原則：
					1.同層級元素(或position:static)默認情況下文檔流后面的元素會覆蓋前面的。（后來居上）
					2. 對于同級元素，position不為static且z-index存在的情況下z-index大的元素會覆蓋z-index小的元素，
					   即z-index越大優(yōu)先級越高。 -->
					   
		<div id="red" style="background: red;z-index: 0;">A</div>
		<div id="green" style="background-color: green;">B</div>
		<div id="blue" style="background-color: blue;z-index: -1;">C</div>
	</body>
</html>

運行結(jié)果：

CSS元素堆疊