CSS的7阶层叠水平（stacking level）

CSS的7阶层叠水平（stacking level）

一、总结

一句话总结：

1、层叠上下文 background/border；2、负z-index

3、block块状水平盒子：正常流式布局，非inline-block，无position定位（static除外）

4、float浮动盒子：无position定位（static除外）的float浮动元素；5、inline/inline-block水平盒子：正常流式布局，非inline-block

6、z-index:auto或z-index:0；7、正z-index

1、层叠上下文 background/border
2、负z-index
3、block块状水平盒子：正常流式布局，非inline-block，无position定位（static除外）
4、float浮动盒子：无position定位（static除外）的float浮动元素
5、inline/inline-block水平盒子：正常流式布局，非inline-block
6、z-index:auto或z-index:0
7、正z-index

二、CSS 7阶层叠水平

转自或参考：CSS 7阶层叠水平
https://www.cnblogs.com/lzijian/p/6227635.html

著名的7阶层叠水平（stacking level）

1. 层叠上下文 background/border
2. 负z-index
3. block块状水平盒子：正常流失布局，非inline-block，无position定位（static除外）
4. float浮动盒子：无position定位（static除外）的float浮动元素
5. inline/inline-block水平盒子：正常流式布局，非inline-block
6. z-index:auto或z-index:0
7. 正z-index

详细参考：http://www.cnblogs.com/coco1s/p/5899089.html

http://www.zhangxinxu.com/wordpress/2016/01/understand-css-stacking-context-order-z-index/?utm_source=tuicool&utm_medium=referral