CSS z-index 属性

例

设置图像的 z-index：

img{position:absolute;left:0px;top:0px;z-index:-1;}

属性定义及使用说明

z-index 属性指定一个元素的堆叠顺序。

拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。

注意： z-index 进行定位元素(position:absolute, position:relative, or position:fixed)。

默认值：	auto
继承：	no
版本：	CSS2
JavaScript 语法：	object.style.zIndex="1"

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

属性
z-index	1.0	4.0	3.0	1.0	4.0

属性值

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

如您还有不明白的可以在下面与我留言或是与我探讨QQ群308855039，我们一起飞！

、前言

网页显示实际上是三维的，我们直观看到的有x轴和y轴，但在网页布局上还有一个z轴，对于定位元素，我们使用top、right、left、bottom来实现元素在x-y平面上的定位，但为了表示布局的三维立体概念，还引入了z-index，z-index属性用来设置元素的堆叠顺序，拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的上方。

z-index有三个参数：

auto：默认值，相当于未设置z-index，可看作z-index: 0
number：无单位数字，用来设置z-index大小
inherit：继承父元素的z-index属性值

举个小例子热热身

 <div style="width: 100px; height: 100px; background-color: red; position: relative;"></div>
 <div style="width: 100px; height: 100px; background-color: black; position: relative; top: -50px;"></div>

第二个div向上移动50px，与第一个div产生了重叠部分，显示情况如下：

第二个div显示在了第一个div上方，也就是重叠部分第二个div遮住了第一个div，现在给第一个div添加z-index属性：

 <div style="width: 100px; height: 100px; background-color: red; position: relative; z-index: 1;"></div>
 <div style="width: 100px; height: 100px; background-color: black; position: relative; top: -50px;"></div>

我们将第一个div的z-index属性设置为1

这时我们发现第一个div遮住了第二个div，下面我们将逐步介绍定位元素属性z-index。

二、z-index只对定位元素奏效

定位元素（position 属性值为 relative 或 absolute 或 fixed）可以理解为具有x、y、z坐标的元素。如果定位元素没有显示给出z-index属性，那么它的z-index默认值为0，如果一个元素不是定位元素，那给它设置z-index属性也是无效的。

例子来了

 <div style="width: 100px; height: 100px; background-color: red; z-index: 5;"></div>
 <div style="width: 100px; height: 100px; background-color: black; position: relative; top: -50px; z-index: 1;"></div>

第一个div的z-index设置为5，第二个div的z-index设置为1

我们看到第二个div覆盖了第一个div，虽然第一个div的z-index属性值更大，但它不是定位属性，所以它的z-index不起作用。

三、非定位元素与非定位元素，以及相同z-index的堆叠顺序比较

如果两个元素都为非定位元素，或者两个定位元素的z-index值相等，那么按照文档流的顺序，后写的元素将覆盖先写的元素。

两个例子

1. 两个都未设置z-index的定位元素

 <div style="width: 100px; height: 100px; background-color: red; position: relative;"></div>
 <div style="width: 100px; height: 100px; background-color: black; position: relative; top: -50px;"></div>

后写的这个div（背景为black）覆盖了先写的div（背景为red）

2. 两个非定位元素

 <div style="width: 100px; height: 100px; background-color: red;"></div>
 <div style="width: 100px; height: 100px; background-color: black; margin-top: -50px;"></div>

后写的这个div（背景为black）覆盖了先写的div（背景为red）

四、定位元素与非定位元素的堆叠顺序

如果定位元素未设置z-index或者z-index为正数，那么此类该定位元素的堆叠顺序大于非定位元素；如果定位元素z-index为负数,那么此类定位元素堆叠顺序小于非定位元素。

例如

第一个定位元素div的z-index为正数，第二个为非定位元素div，第一个定位元素div的z-index为负数

 <div style="width: 100px; height: 100px; background-color: green; position: relative; top: 50px; z-index: 1"></div> 
 <div style="width: 100px; height: 100px; background-color: red;"></div>
 <div style="width: 100px; height: 100px; background-color: black; position: relative; top: -50px; z-index: -1;"></div>

z-index为正数的定位元素覆盖了非定位元素，非定位元素覆盖了 z-index为负数的定位元素

五、父子及兄弟的堆叠顺序

1. 如果父元素设置了z-index且不是默认值auto，无论子元素的z-index为何值，子元素堆叠顺序永远大于其父元素；

 <div style="width: 200px; height: 200px; background-color: green; position: relative; top: 50px; z-index: 100">
 <div style="width: 100px; height: 100px; background-color: blue; position: relative; z-index: -10;"></div> 
 </div>

虽然子div的z-index值小于其父div，但子div仍显示在了父div的上方

2. 如果父元素未设置z-index或值为auto，那么当子元素z-index为负数时，父元素堆叠顺序将大于子元素，否则子元素堆叠顺序大于父元素

 <div style="width: 200px; height: 200px; background-color: green; position: relative; top: 50px;">
 <div style="width: 100px; height: 100px; background-color: blue; position: relative; z-index: -1;"></div>
 </div>

父元素未设置z-index，子元素z-index为-1，可以看到子元素被父元素覆盖了

3. 无论父元素的z-index如何，兄弟元素间的z-index值都可相互比较，z-index值越大堆叠顺序越高

 <div style="width: 200px; height: 200px; background-color: green; position: relative; top: 50px;">
 <div style="width: 100px; height: 100px; background-color: red; position: relative; z-index: 2;"></div>
 <div style="width: 100px; height: 100px; background-color: black; position: relative; z-index: 1; top: -50px;"></div> 
 </div>

第一个子元素的z-index大于第二个子元素的z-index，所以第一个子元素覆盖第二个子元素

3. 对于父元素及兄弟元素之外的其它元素，子元素的堆叠顺序由其父元素的z-index决定。

 <div style="position: relative; z-index: 10;">
 <div style="width: 100px; height: 100px; background-color: red; position: relative; z-index: 2;"></div>
 </div>
 <div style="position: relative; z-index: 5;">
 <div style="width: 100px; height: 100px; background-color: black; position: relative; z-index: 3; top: -50px;"></div> 
 </div>

尽管背景为红色的子div元素z-index小于背景为黑色的子div元素，但红色仍覆盖了黑色，就是因为红色div的父元素z-index大于黑色div的父元素，所以无论黑色子div的z-index多大，它的堆叠顺序始终小于红色div。

六、最后

如有错误或不足之处还望指出探讨，十分感谢！

者： IT共享者来源： IT共享之家

div cssz-index层重叠顺序

div层、span层等html标签层重叠顺序样式z-index，平时CSS使用较少，但也会难免会碰到CSS z-index使用。

从基础语法到应用案例教程讲解学习z-index。

一、z-index语法与结构

z-index 跟具体数字

div{
z-index:100
}

注意：z-index的数值不跟单位。

z-index的数字越高越靠前，并且值必须为整数和正数(正数的整数)。

二、z-index使用条件

z-index在使用绝对定位 position:absolute属性条件下使用才能使用。通常CSS让不同的对象盒子以不同顺序重叠排列，CSS就是要z-index样式属性。

三、案例

1. z-index重叠顺序案例

为了方便观察，设置3个DIV盒子，分别设置不同css背景颜色，设置相同CSS高度、CSS宽度。分别设置背景颜色)为黑色、红色、蓝色。CSS width为300px，css height为100px。

css代码(没加z-index属性)

<style>
.div css5 {
position: relative;
}

.div css5-1,
.div css5-2,
.div css5-3 {
width: 300px;
height: 100px;
position: absolute;
}

.divcss5-1 {

background: #000;/* 黑色*/
left: 10px;
top: 10px
}

.divcss5-2 {

background: #F00;/* 红色*/
left: 20px;
top: 20px
}

.divcss5-3 {

background: #00F;/* 蓝色*/
left: 30px;
top: 30px
}
</style>

CSS代码(加上z-index属性后) :

<style>
.div css5 {
position: relative;
}

.div css5-1,
.div css5-2,
.div css5-3 {
width: 200px;
height: 100px;
position: absolute;
}

.div css5-1 {
z-index: 10;
background: #000;/* 黑色*/
left: 10px;
top: 10px
}

.div css5-2 {
z-index: 20;
background: #F00;/* 红色*/
left: 20px;
top: 20px
}

.div css5-3 {
z-index: 15;
background: #00F;/* 蓝色*/
left: 30px;
top: 30px
}
</style>

html代码

<div class="divcss5-1"></div>
<div class="divcss5-2"></div>
<div class="divcss5-3"></div>

没加的效果:

加上z-index属性效果：

2. 案例说明

三个盒子均都使用了绝对定位属性position样式，并且设置相同的高度和宽度样式。为了便于观察CSS使用left、right属性并赋予不同值，让其错落有致。

Div css5-1 盒子背景为黑色， z-index:10
Div css5-2 盒子背景为红色， z-index:20
Divcss5-3盒子背景为蓝色， z-index:15

为可以看见第一个盒子z-index:10，所以重叠在最下层，而第二个盒子z-index:20，值最大所以最上层重叠，第三个盒子设置z-index:15，居中。

四、总结

本文基于CSS基础，介绍了如何使用z-index重叠顺序样式，在实际DIV+CSS布局时候CSS需要绝对定位样式，并且可以使用left、right进行定位，通过不同z-index值实现层重叠顺序排列。代码很简单，希望能够帮助你学习。

在线咨询

上一篇：python解析XML和HTML
下一篇：你的文本处理得力助手，TXT文本编辑器将HTML网页批量转为PDF文档

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

CSS z-index 属性

您的项目需求