CSS3笔记之定位篇（二）z-index，作为前端程序员都应掌握

知识点7：z-index与其他css属性层叠上下文

background --> 负z-index --> block块状水平盒子 --> float浮动盒子 --> inline/inline-block

–> z-index:auto或z-index:0，不依赖z-index的层叠上下文 --> 正z-index

不支持z-index的层叠上下文元素的层叠顺序均是z-index:auto级别；

依赖z-index值创建层叠上下文的情况：

1. position值为relative/absolute或fixed（部分浏览器）

2. display：flex/inline-flex容器的子flex项

知识点8：z-index相关实践分享

• 最小化影响原则

目的：避免z-index嵌套层叠关系混乱

原因：

1. 元素的层叠关系主要由所在的层叠上下文决定

2. IE7 中z-index为auto也会创建层叠上下文

做法：

1. 避免使用定位属性

2. 定位属性从大容器平级分离为私有小容器

• 不犯二准则

目的：避免z-index混乱，出现一