1261121 - z-index not working well between items with fixed position

Status: RESOLVED INVALID

(Core :: Layout, defect)

Description

[Rafael]

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_9_5) AppleWebKit/601.5.17 (KHTML, like Gecko) Version/9.1 Safari/537.86.5

Steps to reproduce:

I have a menu that uses :hover to drop down options. That menu has "position: fixed" and a z-index value.
Then, I have other "position: fixed" elements with different z-index values, lower than the one of the menu.


Actual results:

When I hover the menu options and they are deployed, they "disappear" under the elements with a lower z-index value.

It has begun to happen in the last versions of Firefox (actually 45.0.1). Previously it worked fine.

It seems to have nothing to do with the :hover option.


Expected results:

When I hover the menu options and they are deployed, they should appear over the elements with a lower z-index.

Comment 1

[Loic]

Could you attach a simple testcase to the bug report, please.

Comment 2

[Rafael]

Attachment: Example

In the file "test.html" you can see an example. Try to hover over the menu, item Option 2.

If I only remove the "position: relative" in the second "div" tag, it works fine.

Comment 3

[Rafael]

Attachment: Screenshot

Screen-shot with "position: relative"

Comment 4

[Rafael]

Attachment: Screenshot 2

Screenshot without the "relative" position.

Comment 5

[Rafael]

Attachment: Screen Shot 3

Comment 6

[Rafael]

Cooment to previous Screen Shot:

I've think about it another time, and perhaps it has something to do with the behaviour of "hover". If the div "fixed is the one with the <ul> menu (see new Screenshot), it works fine. (!!!).

And I've noticed that there are other kind of weird behaviours when the "hovering" the menu when the item that is below has the position attribute defined (the menu disappears, like if you have left hovering it).

Comment 7

[Loic]

It's due to https://www.fxsitecompat.com/en-CA/docs/2015/css-position-fixed-now-always-creates-stacking-context/

Comment 8

[Loic]

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

My guess is this bug is invalid now. David, what do you think?

Comment 9

[Markus Stange [:mstange]]

Yes, this is invalid. Safari and Chrome Canary behave the same as we do.

Rafael: The position:fixed element in your testcase comes before the position:relative element that wraps the table. That means that the position:fixed element is below the table. In the past, the contents of the position:fixed element were able to escape from the position:fixed element's z-order, but this is no longer possible because position:fixed now forces a stacking context. You need to set the z-index on the position:fixed element itself, not on its contents.

Comment 10

[Rafael]

Ok, thanks so much to everybody for your time, work, and explanations. They helped me a lot. Great work!