深入了解CSS中的 z-index 属性

z-index 属性设定了一个定位元素（含有position属性的元素）及其后代元素或 flex 项目的 z-order。 当元素之间重叠的时候， z-index 较大的元素会覆盖较小的元素在上层进行显示。

1、浏览器加载html元素时，元素按照如下顺序堆叠（从下到上的顺序）：

1. 根元素的背景与边框
2. 位于普通流（没有position属性的元素）中的后代块元素按照它们在 HTML 中出现的顺序层叠
3. 浮动块元素
4. 普通流中的后代行内元素
5. 后代中的定位元素按照它们在 HTML 中出现的顺序层叠

注意事项

• 普通流中不含有定位属性的标准块元素始终先于定位元素渲染并出现在定位元素的下层，即便它们在HTML结构中出现的位置晚于定位元素也是如此。

• 当没有指定z-index的时候， 所有元素都在会被渲染在默认层(0层)