Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
916 views
in Technique[技术] by (71.8m points)

z index - Which CSS properties create a stacking context?

I'm studying about stacking contexts and doing some tests with the properties that create a stacking context.

I did several tests and found that, in addition to z-index, of course, the following properties also create a stacking context:

  • transform other than none;
  • opacity other than 1;
  • And perspective.

Are there other properties that apply a stacking context?

Question&Answers:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

One or more of the following scenarios will cause an element to establish its own stacking context1 for its descendants:

  • The root element always holds a root stacking context. This is why you can start arranging elements without having to position the root element first. Any element that doesn't already participate in a local stacking context (generated by any of the other scenarios below) will participate in the root stacking context instead.

  • Setting z-index to anything other than auto on an element that is positioned (i.e. an element with position that isn't static).

    • Note that this behavior is slated to be changed for elements with position: fixed such that they will always establish stacking contexts regardless of their z-index value. Some browsers have begun to adopt this behavior, however the change has not been reflected in either CSS2.1 or the new CSS Positioned Layout Module yet, so it may not be wise to rely on this behavior for now.

      This change in behavior is explored in another answer of mine, which in turn links to this article and this set of CSSWG telecon minutes.

    • Another exception to this is with a flex item and a grid item. Setting z-index will always cause it to establish a stacking context even if it isn't positioned.

  • Setting opacity to anything less than 1.

  • Transforming the element:

  • Creating a CSS region: setting flow-from to anything other than none on an element whose content is anything other than normal.

  • In paged media, each page-margin box establishes its own stacking context.

  • In filter effects, setting filter to anything other than none.

  • In compositing and blending, setting isolation to isolate and setting mix-blend-mode to a value different from normal

  • In will change, setting will-change to a property whose any non-initial value would create a stacking context.

  • In masking, setting clip-path/mask with a value other than none.

Note that a block formatting context is not the same as a stacking context; in fact, they are two completely independent (although not mutually exclusive) concepts.


1 This does not include pseudo-stacking contexts, an informal term that simply refers to things that behave like independent stacking contexts with respect to positioning, but actually participate in their parent stacking contexts.


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...