CSS z - index 属性详解

各位yyds！今天小编要跟大家详细介绍一下CSS中很重要的一个属性——z-index，指的是盒子的层级关系，让你的页面元素在视觉上呈现明显的优先级，把你的网页变得更加有层次感！

先来简单了解一下什么是层级关系：当有多个盒子在同一位置时，它们就会形成覆盖，如何区分它们的叠放关系呢？这时候就要用到z-index了，它可以决定一个元素的堆叠顺序，即Z轴的层级关系。如下图：


有了这个属性就可以让你的页面多姿多彩啦！下面小编就来详细解释一下z-index的使用。

1. 绝对定位的元素

在一个定位元素上设置z-index是非常好用的，它会影响到这个元素和这个元素的子元素的层叠顺序，但是不会影响到定位元素之外的其他元素，如下例：

```CSS

.parent{

position: relative;

z-index: 1;

}

.child{

position: absolute;

z-index: 2;

}

```

我们为.parent设置了个z-index为1，为.child设置z-index为2，这样.child就会定位在.parent之上啦！

2. 文字的层级

文字的z-index默认比其他元素低，但是你可以通过设置它的position和z-index来改变它的层级关系，如下例：

```CSS

h1{

position:relative;

z-index: 1;

}

```

这样你的标题就会浮现在其他元素之上啦！

3. 通过负值来设置层级

你可以把元素的z-index值设置为负数来将其置于底层，当然~是要在元素的父级元素的z-index值为正数或默认值的情况下哦~ ，如下例：

```CSS

.parent{

position: relative;

}

.child{

position: relative;

z-index: -1;

}

```

设置子元素.z-index为-1，它就会被放在父元素下层啦！拥有了这个技巧，就可以让你的页面多姿多彩啦！

4. 相同z-index值的元素

如果两个兄弟元素有相同的z-index值，就会按照它们代码中的先后顺序来进行堆叠。如下例：

```CSS

.item1{

position: relative;

z-index: 1;

}

.item2{

position: relative;

z-index: 1;

}

```

这时候就要看它们的HTML代码中先后顺序了，后面的元素会放在前面元素的上层。

在使用z-index的时候还要注意以下几点：

1. 只能用于定位的元素（position属性值为relative，absolute，fixed）。

2. 父级元素的z-index也会影响到子元素的层叠顺序，因此在确定层叠关系时，要注意父级的z-index值。

3. 显然，设置z-index的大小不符合直觉的是会影响排版效果的。因此，一般情况下，应尽可能少用z-index。

好啦，小编今天就为大家讲解到这里啦，希望你们喜欢这个CSS属性的功能，让你的网页更加美观动感！终于要结束啦，小编也很高兴为大家服务，下次见咯！ www.0574web.net 宁波海美seo网络优化公司 是网页设计制作，网站优化，企业关键词排名，网络营销知识和开发爱好者的一站式目的地，提供丰富的信息、资源和工具来帮助用户创建令人惊叹的实用网站。 该平台致力于提供实用、相关和最新的内容，这使其成为初学者和经验丰富的专业人士的宝贵资源。