z-index, float, margin, line-height, vertical-align, overflow
z-index
z-index: auto ||
特性
- z-index只对定位元素(relative, absolute, fixed, sticky)有作用
- 如果定位元素没有发生嵌套，遵循a.后来居上, b. 谁大谁上
- 如果定位元素发生嵌套，遵循祖先优先原则, 前提z-index是数值不是atuo
层叠上下文
具有层叠上下文的元素：
- 页面根元素
- z-index为数值且是定位元素
- 其他属性
层叠水平
决定同一个层叠上下文中的元素在z轴上的显示顺序，遵循’后来居上’, ‘谁大谁上’层叠准则
层叠顺序: 元素发生层叠时候有着特定的的垂直显示顺序
著名的7阶层叠水平
z-index和层叠上下文
- 定位元素默认z-index:auto 等价于z-index:0
- z-index不为auto的定位元素才会创建层叠上下文
- z-index层叠顺序的比较止于父级层叠上下文
其他属性与层叠上下文
其他属性主要是css3中的属性
- z-index不为auto的flex项（display:flex | inline-flex)
- 元素的opacity值不是1
- 元素的transform值不是1
- 元素的mix-blend-mode不是normal
- 元素的filter的值不是none
- 元素的isolation值是isolate
- position:fixed声明
- will-change指定的属性值为上面任意一个
- 元素的-webkit-overflow-scrolling设为touch
遵循原则
- 最小影响化原则
目的：避免z-index嵌套混乱
做法： 避免使用定位元素 - 不二原则
目的：避免z-index混乱，一山比一山高的样式问题
原因：多人协作以及后期维护
做法： 非浮动元素（弹框）避免设置z-index值
##
