携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第22天，点击查看活动详情
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 属性的取值
该属性的取值有三种：
- 字符值：
auto - 整数值：
0,1,2,-1,100等都可以。 - 全局值：
inherit、initial、unset
注意事项：
z-index属性的取值是不用加单位的；- 如果不同定位元素
z-index属性的取值相同，则根据书写顺序，后来者居上。 - 当
z-index属性的取值为auto时，则盒子不会创建一个新的本地堆叠上下文。在当前堆叠上下文中生成的盒子的堆叠层级和父级盒子相同。 - 当
z-index属性的取值为整数值时，表示为当前堆叠上下文中的堆叠层级。注意，该元素会创建一个堆叠层级为 0 的本地堆叠上下文，此时该元素的后代元素的z-index属性是不会跟该元素的外部元素的z-index属性进行对比。
3️⃣写在最后
好了，今天的笔记就记到这里。
