1️、前言

大家好，我是翼同学。今天笔记的内容是：

• z-index

2️、内容

2.1、什么是 z-index ？

当我们添加了定位后，元素开始发生层叠，如果我们拥有不止一个定位元素，那么此时如何决定哪些元素放在哪一层，哪个元素放在最顶层等，都可以用z-index属性来解决。

让我们想象一下，之前我们都是通过x轴和y轴来讨论网页元素的布局位置，此时又多了一个z轴，其垂直于网页并指向用户，每个定位元素都通过设置z轴的值来决定在z轴上的位置，数值越大便越往上走，越小则越往下移动。需要注意，默认情况下，定位的元素都具有 z-index 为 auto 。

因此简单来说，z-index属性就是用于更改position属性为非static的元素的堆叠顺序，并确定该元素是否创建新的局部层叠上下文。

2.2、z-index 属性的取值

该属性的取值有三种：

1. 字符值：auto
   

2. 整数值：0, 1, 2, -1, 100等都可以。

3. 全局值：inherit、initial、unset
   

注意事项：

• z-index属性的取值是不用加单位的；

• 如果不同定位元素z-index属性的取值相同，则根据书写顺序，后来者居上。

• 当z-index属性的取值为auto时，则盒子不会创建一个新的本地堆叠上下文。在当前堆叠上下文中生成的盒子的堆叠层级和父级盒子相同。

• 当z-index属性的取值为整数值时，表示为当前堆叠上下文中的堆叠层级。注意，该元素会创建一个堆叠层级为 0 的本地堆叠上下文，此时该元素的后代元素的z-index属性是不会跟该元素的外部元素的z-index属性进行对比。

3️、写在最后

好了，今天的笔记就记到这里。