CSS--z-index与堆叠顺序、堆叠上下文

• 默认堆叠上下文是根元素- 当z-index不为auto（即使是0，也能形成），且position为fixed \ relative \ absolute时，形成新的堆叠上下文

---

1. 前提：boxes属于同一个stacking context，并且z-index相同
** 规则：按照box对应的element在文档树的顺序，后者比前者更靠近用户（back-to-front）**

---

** 2. 前提：boxes属于同一个stacking context，并且z-index不同**
** 规则：z-index属性值大的box更靠近用户**

---

3. 前提：boxes属于不同的stacking context，并且stacking contexts没有祖孙/父子关系
** 规则：boxes会向上沿着父box进行搜索，直到父boxes属于同一个stacking context为止，然后比较父boxes的z-index属性值，z-index属性值大的box更靠近用户。**

---

** 4. 前提：boxes属于不同的stacking context，并且stacking contexts为祖孙/父子关系
** 规则：属于子stacking context的box必定更靠近用户

---

** 5. 前提：boxes属于相同的stacking context，并且两者都是non-positioned element。**
** 规则：float:left|right的元素必定更靠近用户**

---

堆叠环境按照如下顺序进行解析：
1、背景颜色、图片、堆叠环境元素的边框
2、拥有负z-index的定位元素
3、块状非定位元素
4、浮动非定位元素
5、内联非定位元素
6、被赋予了z-inde:auto 和 z-index:0 的定位元素
7、有正直的z-index元素

321f9ecdb89b36397c0e68c2331a5aea.png

c42f88ed91033cb4906ecaacf07479e6.png