Skip to content

Latest commit

 

History

History
18 lines (14 loc) · 754 Bytes

008.哪些情况下z-index的行为发生变化.md

File metadata and controls

18 lines (14 loc) · 754 Bytes

哪些情况下z-index的行为发生变化

问题详细:正常情况下,元素的层叠规则遵守"值越大位置越靠上、谁在后谁靠上",但是在一些特殊情况下,层叠规则会有些不同, 请结合你的开发经验,是否发生过这情况

情况列表

  • 元素为flex布局元素(父元素display:flex|inline-flex),同时z-index不为auto
  • 元素的opacity值不是1
  • 元素的transform不是none
  • 元素mix-blend-mode知不是normal
  • 元素的filter值不是none
  • 元素的isolation值是isolate
  • 元素的will-change属性值为上面2~6的任意一个(如will-change:opacity will-change:transform等)
  • 元素的-webkit-overflow-scrolling设为touch

参考

《CSS世界》