z-index

听过 < demo过 < 实际工作用过 < 实际工作中被坑过 < 实际工作中被多次坑过或者深入研究总结过
而，人的知识除了受限于自己的学习主动性以外，也受限至他的视野，当时我的视野就在前端方面打不开，没有去研究携程的日志统计系统与发布系统，到现在需要用到这部分知识时才感到苦不堪言而后悔莫及。

2 .z-index 与定位

Z-index只对定位元素有用，除开static

• 定位元素无嵌套
  后来居上 ：DOM元素顺序
  哪个大哪个上：Z值谁大
• 定位元素有嵌套
  祖先优先：顶级祖先元素决定了优先程度（要求祖先Z值要是数值的）
  z-index:auto 即z-index:0,不会创建新的层叠上下文

层叠上下文与层叠水平

stacking context:影响HTML元素在Z轴上的表现的
有层叠上下文的： 根元素，z-index为数值的定位元素，其它属性

stacking level：层叠上下文中的优先级，后来居上，Z大居上,不是z-index别理解错了

所有元素都有stacking level

stacking context 可嵌套，不影响兄弟元素，子层是依赖于父层的等级

• 层叠顺序

  
  
  

  image.png

浮动盖正常块 正常
inline 盖浮动， 一般inline的都是内容，而浮动块一般都是布局相关的。

其他会创建层叠上下文的

绝大部分是CSS
opacity not 1, flex项且Z值不是AUTO,transform非NONE,filter非none,

实践

• 最小化影响 避免Z-index 嵌套关系混乱
  少用定位
• 不犯2，避免 一山比一山高样式问题
  多人维护，疯狂加Z-INDEX
  非浮层元素 避免使用z-index,灵活运用层叠顺序 非浮层元素 z-index 不要超过2
• 组件层级计数器
  如果有高层级元素，外部组件OR有很多弹窗呢？
  动态获得BODY下最大的Z-index值
• 可访问性隐藏：人眼看不见，但是辅助设备可以识别
  z-index负值在层叠上下文下面