css z-index

1.z轴重叠

元素间除了在平面上重叠，在z轴（即用户与设备方向）上也会有多个元素重叠。

图1 z轴重叠

2.层叠上下文

html创建一个层叠上下文，在此基础上可以创建独立的新的局部层叠上下文。同一个层叠上下文中，根据z-index的值来决定重叠元素的在z轴上的显示顺序。不同层叠上下文的z-index ，无可比性。

图2 同一层叠上下文

 如图2所示，在html层叠上下文（z-index为0）中，有两个z-index分别为100，500的元素，div2的z-index值大于div1的z-index值，div2在div1上。

 图3 不同层叠上下文

图3所示，div1、div2、div3分别创建了一个新的局部层叠上下文，div2有一个z-index为10的子元素div3。在div2的层叠上下文中，div2本身z-index为0。div2内部的元素的层叠顺序，只在div2层叠上下文比较。在div2局部层叠上下文中，div2的z-index的值为0，其子元素div3的z-index为10，div3在div2上面。在html层叠上下文中，div2在div1上面，div2与div1分别看作一个整体。可知，层叠顺序从上到下为:div3 div2 div1。

3.产生新的层叠上下文条件

position的值设置为absolute、fixed或relative时，z-index有效。