CSS z-index 的效果

時間 2019-11-19

標籤 css index 效果欄目 CSS 简体版

原文原文鏈接

z-index 屬性設置元素的堆疊順序。擁有更高堆疊順序的元素老是會處於堆疊順序較低的元素的前面。 css

註釋：元素可擁有負的 z-index 屬性值。 html

註釋：Z-index 僅能在定位元素上奏效（例如 position:absolute;）！ spa

說明

該屬性設置一個定位元素沿 z 軸的位置，z 軸定義爲垂直延伸到顯示區的軸。若是爲正數，則離用戶更近，爲負數則表示離用戶更遠。 code

默認值：	auto
繼承性：	no
版本：	CSS2
JavaScript 語法：	object.style.zIndex="1"

可能的值

值	描述
auto	默認。堆疊順序與父元素相等。
number	設置元素的堆疊順序。
inherit	規定應該從父元素繼承 z-index 屬性的值。

上面 z-index 的用法來自 w3school（有現成的不用是傻瓜）

下面是我的的一點心得體會 htm

<html>
<head>
<style type='text/css'>
	#divRed {
		background:red;
		border:2px solid red;
		width:100px;
		height:100px;
		padding:10px;
		position:absolute;
		left:50px;
		top:0px;
		z-index:0;
	}
	#divBlue {
		background:blue;
		border:2px solid blue;
		height:100%;
		width:100%;
		z-index:9999;
	}
	#divYellow {
		background:yellow;
		border:2px solid yellow;
		height:80px;
		width:100px;
		position:absolute;
		left:0px;
		top:0px;
	}
</style>
</head>
<body>
<div id='divRed'>
	<div id='divBlue'></div>
</div>
<div id='divYellow'></div>
</body>
</html>

上面代碼的效果以下圖繼承

雖然 divBlue 設置了 z-index:9999; 可是依然會被 divYellow 遮住。

總結了一下： ip

1. 即便 divRed 的 z-index 大於 divBlue 的 z-index，divRed 也不會遮住 divBlue，即父節點遮不住子節點。 it

2. 若 divYellow 和 divRed 都設置了 z-index ，divYellow 能遮住 divRed，則也能遮住divBlue。 io

3. 若 divRed 沒有設置 z-index，則要看 divBlue 和 divYellow 的 z-index。 table