Bug 168725 - position: sticky shouldn't create a stacking context
Summary: position: sticky shouldn't create a stacking context
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: Layout and Rendering (show other bugs)
Version: Safari 9
Hardware: Unspecified Unspecified
: P2 Normal
Assignee: Nobody
URL:
Keywords:
Depends on:
Blocks:
 
Reported: 2017-02-22 07:51 PST by Robert Flack
Modified: 2022-07-14 18:56 PDT (History)
5 users (show)

See Also:


Attachments

Note You need to log in before you can comment on or make changes to this bug.
Description Robert Flack 2017-02-22 07:51:56 PST
As far as I can tell from reading https://drafts.csswg.org/css2/visuren.html#z-index only position fixed implicitly creates a stacking context.

Loading http://output.jsbin.com/yucorey shows an example page which demonstrates that currently sticky is creating a stacking context (i.e. the z-index 2 descendant is stacked below the z-index 1 sibling.
Comment 1 Simon Fraser (smfr) 2017-02-22 08:34:35 PST
I think it's better to match position:fixed here, since sticky has fixed-like behavior part of the time.

https://drafts.csswg.org/css-position-3/#position-property needs to be updated to say this.
Comment 2 Simon Fraser (smfr) 2017-02-22 08:36:52 PST
https://github.com/w3c/csswg-drafts/issues/1053
Comment 3 Emilio Cobos Álvarez (:emilio) 2022-07-14 15:16:24 PDT
@smfr: Did safari regress something here?

  data:text/html,<meta charset=utf8><h1 style="position: sticky; top: 0;background-color:tomato; text-align: center;">Hello</h1><main style="height: 200vh;"><button>Plain, under</button><button style="opacity: 0.6;">Translucid, overlaps</button></main>

Seems to not behave the same as:

  data:text/html,<meta charset=utf8><h1 style="position: fixed; width: 100% top: 0;background-color:tomato; text-align: center;">Hello</h1><main style="height: 200vh;"><button>Plain, under</button><button style="opacity: 0.6;">Translucid, overlaps</button></main>

in Safari, but it does in Gecko and Blink.
Comment 4 Simon Fraser (smfr) 2022-07-14 18:56:32 PDT
Looks like we have an overlap-testing bug where "Translucid" fails to z-order on top o the sticky if you scroll (it gets fixed if you resize the window when it's on top).