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