1.5 css定位 - stacking contexts与BFC - refer to 《CSS in Depth》

Stacking contexts

相似的，BFC(block formatting contexts)解决文档流重叠问题。stacking context解决渲染层次问题。我们在用透明度时，明显看出文档的层次问题，因为此时也同时建立了一个层叠上下文。

像前面grid布局给文档提供二维布局，stacking context给文档建立一个三位笛卡尔坐标系统。
z-index:值为无符号数字。

按照遮挡顺序，后者在前者上面：

1. 根节点stacking context
2. z-index值为负数
3. 非定位元素
4. z-index值为auto
5. z-index值为整数

定位元素

专有值

1. z-index
2. left
3. right
4. top
5. button

position: static

任何元素默认为static

position: fixed

fixed相对于视窗定位。

position: absolute/relative

绝对值absoluate相对于最近的定位元素父级，一般用relative作为父级
而relative相当于定位元素与静态元素（文档流）之间的过渡，在不影响文档流的情况下，变换相对位置。

relative不能像absolute与fixed一样，隐式的设置元素的宽高，只能做相对位移。

新值：position: sticky

像fixed可以相对于窗口，但只可以在一个容器里移动，不能突破父容器，故能达到滚动锁定的目的。
支持并不完善，chrome也只是部分支持。