前端造地基-css-层叠规则

层叠规则是用来解决元素发生重叠时如何显示元素的问题。

层叠上下文（stacking context），元素在z轴方向上的封闭的空间。层叠上下文元素（具有层叠上下文）比普通元素在z轴方向更接近人。层叠上下文元素内部的子孙元素就包含在该元素的层叠空间内，与其他层叠上下文元素的层叠空间隔离开，但是又相互影响最终的视觉呈现。

层叠水平（stacking level）决定了同一个层叠上下文中发生重叠时元素在z轴上的显示顺序。所有元素都拥有层叠水平，然而普通元素的层叠水平只局限于当前层叠上下文元素中。

        就比如这个图片里面所有元素都是在最外层的HTML根元素层叠上下文，HTML 中又包含普通元素和层叠上下文元素（单个或多个）。

        一个基本层叠空间包含普通元素以及其他层叠空间，然后内部的层叠空间又可以包含层叠空间。同一层叠空间内的重叠元素的显示顺序就看两者的层叠顺序。而不同层叠空间内的元素发生重叠的话，就要看层叠空间元素的层叠顺序了。

        简单来说就是这几个特性：① 层叠上下文之间可以嵌套，内部受限于外部~；② 每个~与兄弟~之间独立；③ 每个~自成体系；④ 每个~的层叠水平比普通元素高。

        主要的层叠规则有：① 谁大谁上；② 后来居上。

        z-index 可以改变元素层叠水平，只能用于定位元素以及flex盒子的子元素，但是层叠水平是每个元素都具有的。

        哪些元素具备层叠上下文？上图里提到的HTML、有效z-index值的定位元素、部分 css3 属性（PS：《CSS世界》P216）。