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 限制 position:fixed 的跟随效果


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