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有效。