[CSS-22][CSS-21][CSS3] Stacking context complicated

[Nadya678]

Why position:fixed and position:sticky create stacking context but the position:relative and absolute don't?
Why the stacking context definition was changed between CSS2.2 and CSS2.1?

This is too complicated for the moment. Many styles with non-default value create stacking context but in many cases stacking context is created only for part of possible values.

BTW. sticky positioning is described on MDN as working similar to relative. If sticky is shown like "fixed" the width is still relative to containing block.

[Loirooriol]

In fact the spec defines z-index: auto with

If the box has 'position: fixed' or if it is the root, it also establishes a new stacking context.

It doesn't mention position: sticky, so it would seem they shouldn't create a stacking context. But of course CSS Position is not maintained and this is not reliable. I don't understand why, I think it's much more important than other things which are properly maintained.

So I tested a bit and it seems that both Firefox and Chrome create a stacking context, but Edge does not. https://jsfiddle.net/vtxw5us6/

Firefox does it since its initial implementation in bug 886646. See comments 63, 64 and 66.

Basically, it seems they just copied webkit, which decided to make position: sticky behave like position: fixed in this regard, see https://developers.google.com/web/updates/2012/09/Stacking-Changes-Coming-to-position-fixed-elements. Interestingly, position: fixed didn't create a stacking context back then on Firefox.

[tabatkins]

Hm. position:sticky is a form of position: relative, not fixed; the element keeps its geometry where it is and just shifts its appearance, exactly like position: relative, but with the amount of shifting magically determined by the browser.

I agree that a lot of this problem is the result of the spec being quickly abandoned by its editors. :/ @atanassov, could you help fix this, or find new editors for the spec?

[FremyCompany]

@tabatkins But you agree that Edge behaves per-spec here, right?

[tabatkins]

I think so? I'm not intimately familiar with the organization of the spec, but it does seem like it only specifies that fixpos generates a stacking context from z-index: auto (and thus Edge is correct, other browsers aren't).

[Nadya678]

Yes, and we should specify that the context is not created for sticky BEFORE the sticky stop to be an experimental.

Yes, IE11 also doesn't create stacking context like EDGE for fixed positioned elements. I have more work due to it because I want to put layer between two parts of header, that second part on mobile devices is shown close to bottom edge of phone. Intended: z-index:auto for header, z-index:10 for top part and z-index:8 for bottom part (the z-index:9 was additional application layer) but fixed position disrupted it. I have solution but too much complicated!

But spec:

If the box has 'position: fixed' or if it is the root, it also establishes a new stacking context.

On part of websites I also found the sticky also create a stacking context but IMO should not. I mean sticky as "double" relative (relative to scrolling box and parent element) rather than relative/fixed switched.

Element with a position value "fixed" or "sticky" (sticky for all mobile browsers, but not older desktop).

WUT?

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context

[SelenIT]

@Nadya678, as far as I understand, the CSS2.x spec had to change the definition of the position:fixed effect on the stacking context (at some point in 2015, see errata for CSS2.1 and the "Changes" section in CSS2.2) in order to match the reality better. WebKit/Blink browsers had implemented it this way in 2012 (for mobile performance reasons) and other browsers had to follow because of interoperability.

The MDN's warning also refers only to the current reality (the fact that most mobile browsers are either WebKit/Blink-based or those that copied the same behavior, while on desktops there are browsers with different behavior like Edge). It doesn't prescribe anything for new browser. And I agree with @Loirooriol and @tabatkins that per current CSS Position Level 3 draft position:sticky with z-index:auto shouldn't create new stacking context (although, unfortunately, this spec is still marked with "Not ready for implementation" banner).

[Nadya678]

Not ready for implementation

But implemented partially in Moz and Cr. And should be specified not to create stacking context and marked with bold.

Have we any specification that says the stacking context is not created for sticky? I can file bug but I don't know what specification writes about it.

[Loirooriol]

Related: #1053