The stacking context

只是一篇垃圾笔记。

The stacking context

从 MDN 看:

定义: The stacking context is a three-dimensional conceptualization of HTML elements along an imaginary z-axis relative to the user who is assumed to be facing the viewport or the webpage. HTML elements occupy this space in priority order based on element attributes.

怎么形成:

A stacking context is formed, anywhere in the document, by any element in the following scenarios:

  • Root element of document (HTML).
  • Element with a position value "absolute" or "relative" and z-index value other than "auto".
  • Element with a position value "fixed" or "sticky" (sticky for all mobile browsers, but not older desktop).
  • Element that is a child of a flex (flexbox) container, with z-index value other than "auto".
  • Element with a opacity value less than 1 (See the specification for opacity).
  • Element with a mix-blend-mode value other than "normal".
  • Element with any of the following properties with value other than "none":
    • transform
    • filter
    • perspective
    • clip-path
    • mask / mask-image / mask-border
  • Element with a isolation value "isolate".
  • Element with a -webkit-overflow-scrolling value "touch".
  • Element with a will-change value specifying any property that would create a stacking context on non-initial value (see this post).

层级上下文结合浏览器的渲染过程来看。

transform

transform提升元素的垂直地位

原理是: 创建了新的层级上下文

transform 限制 position:fixed 的跟随效果

这个算是一个隐藏的问题,也是一个利用的技巧。

这个特性表现,目前只在Chrome浏览器/FireFox浏览器下有,IE浏览器,包括IE11, fixed还是fixed的表现。

transform改变overflow对absolute元素的限制

具体还是得看大神的。。。

参考: