层叠问题

• z-index
  z-index是用来调整元素及其子元素在z轴上的位置（仅对具有position属性的元素（不考虑css3）生效）

• 层叠水平
  一个dom元素，在不考虑层叠上下文的情况下，会按照层叠水平决定元素在z轴的显示顺序，（7阶层叠水平（stacking level））
  
  若两个元素层叠水平相同时，遵循

  1. 后来居上原则
     后面的dom覆盖前面的dom
  2. z-index大，谁在上

• 层叠上下文

1. 默认创建层叠上下文（html根元素）
2. 配合z-index创建层叠上下文
   • position为（relative/absolute/fixed（部分浏览器））
   • flex项（父元素为display为flex | inline-flex）
     需设置z-index的值（不能是auto）
3. 不配合z-index
   • 元素的透明度 opacity 小于1
   • 元素的 mix-blend-mode 值不是 normal
   • 元素的以下属性的值不是 none：
     • transform
     • filter
     • perspective
     • clip-path
     • mask/mask-image/mask-border
   • insolution:isolate
   • -webkit-overflow-scrolling:touch
   • will-change

创建完层叠上下文后，仅影响子孙代元素，自身的层叠水平由父层叠上下文所决定。

• 比较两个dom的显示顺序
  • 相同层叠上下文直接比较
  • 不同则找到共同的祖先层叠上下文

学习自happylindz的github

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！