168725 2017-02-22 07:51:56 -0800 position: sticky shouldn't create a stacking context 2024-06-26 05:34:09 -0700 1 1 1 Unclassified WebKit Layout and Rendering Safari 9 Unspecified Unspecified NEW P2 Normal --- 1 flackr webkit-unassigned bfulgham cigitia eelco emilio simon.fraser zalan oldest_to_newest 1279887 0 flackr 2017-02-22 07:51:56 -0800 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. 1279892 1 simon.fraser 2017-02-22 08:34:35 -0800 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. 1279894 2 simon.fraser 2017-02-22 08:36:52 -0800 https://github.com/w3c/csswg-drafts/issues/1053 1883849 3 emilio 2022-07-14 15:16:24 -0700 @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. 1883944 4 simon.fraser 2022-07-14 18:56:32 -0700 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).