elements with custom opacity show up above sticky elements

RESOLVED INVALID

Status

()

Core
Layout
RESOLVED INVALID
4 years ago
4 years ago

People

(Reporter: Šime Vidas, Unassigned)

Tracking

32 Branch
x86_64
Windows 8.1
Points:
---

Firefox Tracking Flags

(Not tracked)

Details

(Reporter)

Description

4 years ago
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.

Updated

4 years ago
Component: Untriaged → Layout
Product: Firefox → Core
> 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
Flags: needinfo?(sime.vidas)
(Reporter)

Comment 2

4 years ago
Safari behaves the same (https://twitter.com/yousain/status/521865852480925696). I think everything’s correct then. Please resolve as INVALID :)
Flags: needinfo?(sime.vidas)
Yep.  ;)
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.