stacking context

层叠上下文如何创建？

  1. 页面根元素天生具有层叠上下文，称之为“根层叠上下文”。
  2. z-index值为数值的定位元素的传统层叠上下文。
  3. 其他CSS3属性。

具体来说，

①. 根层叠上下文
指的是页面根元素，也就是滚动条的默认的始作俑者<html>元素。这就是为什么，绝对定位元素在left/top等值定位的时候，如果没有其他定位元素限制，会相对浏览器窗口定位的原因。

②. 定位元素与传统层叠上下文
对于包含有position:relative/position:absolute的定位元素，以及FireFox/IE浏览器（不包括Chrome等webkit内核浏览器）（目前，也就是2016年初是这样）下含有position:fixed声明的定位元素，当其z-index值不是auto的时候，会创建层叠上下文。

③. CSS3与新时代的层叠上下文
CSS3的出现除了带来了新属性，同时还对过去的很多规则发出了挑战。例如，CSS3 transform对overflow隐藏对position:fixed定位的影响等。而这里，层叠上下文这一块的影响要更加广泛与显著。

层叠准则

下面这两个是层叠领域的黄金准则。当元素发生层叠的时候，其覆盖关系遵循下面2个准则：

  1. 谁大谁上：当具有明显的层叠水平标示的时候，如识别的z-indx值，在同一个层叠上下文领域，层叠水平值大的那一个覆盖小的那一个。通俗讲就是官大的压死官小的。
  2. 后来居上：当元素的层叠水平一致、层叠顺序相同的时候，在DOM流中处于后面的元素会覆盖前面的元素。

     例如：

<div style="position:relative; z-index:auto;">
    <img src="mm1.jpg" style="position:absolute; z-index:2;">    <-- 横妹子 -->
</div>
<div style="position:relative; z-index:auto;">
    <img src="mm2.jpg" style="position:relative; z-index:1;">    <-- 竖妹子 -->
</div>
由于两个div包含块的z-index为auto，img子元素处于同一层叠上下文中，所以两个img子元素的层叠上下文只要根据其z-index值比较即可。
<div style="position:relative; z-index: 0;">
    <img src="mm1.jpg" style="position:absolute; z-index:2;">    <-- 横妹子 -->
</div>
<div style="position:relative; z-index: 0;">
    <img src="mm2.jpg" style="position:relative; z-index:1;">    <-- 竖妹子 -->
</div>
但是当div的z-index值为0时，两个div便各自创建了层叠上下文，此时img的层叠顺序完全由父元素控制。

    ***注意*****

当两个兄弟元素都设置position: absolute;时，后面元素的层叠等级高于前面元素，所以后面元素会将前面元素覆盖。

eg:http://jsbin.com/?html,css,output

转载自：http://www.zhangxinxu.com/wordpress/2016/01/understand-css-stacking-context-order-z-index/

posted @ 2017-10-11 18:54  月上柳梢头，  Views(148)  Comments(0)    收藏  举报