User Agent: Mozilla/5.0 (Windows NT 6.3; WOW64; rv:32.0) Gecko/20100101 Firefox/32.0 Build ID: 20140923175406 Steps to reproduce: Open this demo http://jsbin.com/buvev/1/edit. Scroll down until the image reaches the sticky header. Actual results: The image is rendered above the sticky header. Expected results: The sticky header should be rendered above all scrolling (in-flow) content, including the image.
> The sticky header should be rendered above all scrolling (in-flow) content Should it? The opacity creates a new stacking context, which changes z-ordering behavior. You get the same effect with other things that create a stacking context, like "position: absolute" or "position: relative". The spec at http://dev.w3.org/csswg/css-position-3/#sticky-positioning doesn't change z-ordering in any way other than by making position:sticky create a stacking context. Note that the behavior would be the same if the header were "position: fixed".... If you want your header to be on top of other things, give it an appropriate z-index.
Summary: Table cells with custom opacity show up above sticky elements → elements with custom opacity show up above sticky elements
Safari behaves the same (https://twitter.com/yousain/status/521865852480925696). I think everything’s correct then. Please resolve as INVALID :)
Status: UNCONFIRMED → RESOLVED
Last Resolved: 4 years ago
Resolution: --- → INVALID
You need to log in before you can comment on or make changes to this bug.