如果给一个元素使用了position的某个属性
普通块级元素div
遵从div的分层样式，内联元素在块级元素之上；
加了position属性的块级元素div
此时块级元素变成定位元素，不再受控于div分层；
给定位元素再加个z-index
给定位元素加取正数的z-index
注：可以发现，加了取正数的z-index定位元素（红色长条和绿色长条）会其按大小顺序在内联元素的上面罗列；
给定位元素加取负数的z-index
注：黄色为背景色，红色是加了取负数的z-index，所以结论是，加了取负数的```z-index``的`定位元素会按其大小顺序在background的后面罗列；
当然也并非刻意无限的罗列
定位元素要么在内联元素之上，要么在background之下
层叠上下文（又叫堆叠上下文）
论z-index: 10和z-index: 5哪个高？
-
通常的认识
注：绿色z-index是10，蓝色z-index是5，结果正如所想；
-
特殊情况
【先看眼代码】注：如果a和b都存在z-index的值，那么比较的时候就会对二者进行比较，但是如果b这一方没有z-index值，那么就将a和b2放在一起比较，此时a2和b2没有可比性；
借用方方老师的比喻就是： 每个层叠上下文就是一个新的小世界（作用域），这个小世界里面的z-index跟外界无关，处在同一个小世界的z-index才能比较；
创建层叠上下文的条件
以下是最基本的
- z-index值不为auto的绝对/相对定位（上面主要讲解的）
- flex容器的子元素
- opacity属性的值小于1的元素
- transform的属性不为none的元素
更详细内容可自行层叠上下文MDN
补充内容：opacity和background的rgba的区别？
答案：opacity影响整个元素的透明度，而background的rgba只会影响背景色的透明度；
负的z-index与层叠上下文
下面是一堆个人理解，如果已经意会请翻页：
【先看眼代码】没有添加z-index: 0之前，红色方块（负z-index的demo）确实应该出现在蓝色方块（container）的下面（因为此时的层叠上下文是html），但是，添加之后，container就变成了一个层叠上下文的小世界，那么demo就逃不出container这个魔爪了，所以红色方块负的再多，都会在container的小世界里（即在蓝色上边显示）
