z-index影响下的层级布局

最新推荐文章于 2025-05-16 14:08:06 发布

原创最新推荐文章于 2025-05-16 14:08:06 发布 · 2.5k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#CSS #z-index #IE6

CSS 专栏收录该内容

5 篇文章

订阅专栏

本文详细解析了CSS中z-index属性的作用原理及其使用规则，包括如何通过z-index控制元素的堆叠顺序，并探讨了不同浏览器下的默认行为差异。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

定义：

z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。（仅在节点的 position 属性为 relative, absolute 或者 fixed 时生效。）

该属性设置一个定位元素沿 z 轴的位置，z 轴定义为垂直延伸到显示区的轴。如果为正数，则离用户更近，为负数则表示离用户更远。

默认值：	auto（各种主流浏览器）、0（IE6/7、IE8的混杂模式下）
继承性：	no
版本：	CSS2
JavaScript 语法：	object.style.zIndex="1"

可选值：

值	描述
auto	默认。堆叠顺序与父元素相等。
number	设置元素的堆叠顺序。
inherit	规定应该从父元素继承 z-index 属性的值。

规则：

基本规则：

1. 不设置position 属性, 但为节点加上 z-index 属性. 发现 z-index 对节点没起作用。

2. 设置了position属性（值不为static），对应的节点将脱离文本流，漂浮（覆盖）在其他节点上边。所以设置position属性能提升节点的显示等级。

3.如果所有节点都定义了相同的position，例如absolute。但没有设置z-index属性，节点将按出现的顺序依次覆盖前面节点重叠的部分，遵循“后来居上”原则。

4. z-index 为 0 的节点与没有定义 z-index 在同一层级内没有高低之分; 但 z-index 大于等于 1 的节点会遮盖没有定义 z-index 的节点; z-index 的值为负数的节点将被没有定义 z-index 的节点覆盖。

5. 子元素永远覆盖在父元素的上方。

<head>
<style type="text/css">
*{
	margin:0;
	padding:0;
}
body{background-color:#000;}
.b{
	width:80px;
	height:70px;
	background:blue;
	position:absolute;	
}
.lt10{
	left:10px;
	top:10px;
}
.a{
	width:80px;
	height:70px;
	background:red;	
}
.c{
	width:80px;
	height:70px;
	background:yellow;	
}
</style>
</head>
<body>
<div class="a">A</div>
<div class="b lt10">B</div>
<div class="c">C</div>
</body>

从父规则：

若是父节点都设置了一样的z-index值，则无论子节点设置何值，都只依照父节点的z-index值，根据上边所述的“基本规则”，完成节点之间的叠放。

<head>
<style type="text/css">
*{
	margin:0;
	padding:0;
}
body{background-color:#000;}
.b{
	width:160px;
	height:140px;
	background:blue;
	position:absolute;
	z-index:1;
	
}
.c{
	width:160px;
	height:140px;
	background:yellow;
	position:absolute;
	z-index:1;
}
.a{
	width:160px;
	height:140px;
	background:red;position:absolute;
	z-index:1;
}
.lt30{
	left:30px;
	top:30px;
}
.lt60{
	left:60px;
	top:60px;
}
.lt15{
	left:15px;
	top:15px;
}
.a1{
	width:160px;
	height:140px;
	background:pink;
	position:absolute;
	z-index:3;
}
.b1{
	width:160px;
	height:140px;
	background:gray;
	position:absolute;
	z-index:4;
}
</style>
</head>
<body>
<div class="a">A<div class="a1 lt15">A1</div></div>
<div class="b lt30">B<div class="b1 lt15">B1</div></div>
<div class="c lt60">C</div>
</body>

如图所示，A1、B1设置的值比C高，但是依旧被作为跟A、B同级的C节点所覆盖。

若在上边的代码加点小修改，比如删掉节点A的position属性，或者position设置为static，就会产生不同变化。

删去position属性，A1由于z-index值最高覆盖了其他节点删去A1节点，证明A的z-index值失效从而被其他节点覆盖

原因：因为absolute的绝对定位是以设置了relative或者absolute的父辈元素为焦点的，用上述例子来说，A1是放在A中的div，但是A的position已经删除，所以A1、B、C都是根据屏幕的左上角作为定位的焦点，在定位的层级元素上属于同一层，因为z-index高于B、C，所以也就覆盖了其他节点。