2

In relation to z-index and the stacking order between siblings - by definition only positioned (having position other than static) elements obey z-index values. Positioned elements will always appear above unpositioned.

However, setting transform and z-index on an unpositioned element shows weird results which are different on Chrome and Firefox.

Here are 3 unpositioned divs: https://jsfiddle.net/mz29Luwo/
They are stacked according to their order (which is normal).

Now here they are, with transform set on the second (pink) div, and z-index -1: https://jsfiddle.net/mz29Luwo/1/
In Chrome it doesn't change anything, but in Firefox (49.0, Ubuntu)- it makes the 2nd(pink) div appear below the first one (yellow) - as long as its z-index is set to a negative value (doesn't matter which one). A similar effect happens if you also set transform on the 3rd div.

Why is this happening?
Which browser shows the correct behavior?
Are there any other properties (not position) which can cause similar things?
Is this related to "the stacking context" ? I don't think it should - creating a new stacking context applies to the children of the element, but this is something related to its siblings...
Is there a bug in one of the browsers?

EDIT: Putting transform also makes the div appear above the other ones - however as said - changing its z-index doesn't do anything further in Chrome, and in Firefox a negative z-index does.

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
Yuval A.
  • 5,849
  • 11
  • 51
  • 63

1 Answers1

2

css-transforms says that an element with a transform establishes "both a stacking context and a containing block", but it doesn't say whether that element is a positioned element (at least for the purposes of z-index). CSS2.1 makes no distinction, as there is never a scenario in CSS2.1 in which a non-positioned element can establish a stacking context (with the exception of the root element) — there are a variety of other properties that can result in the creation of a stacking context, but they are all CSS3.

For what it's worth, Firefox is the only browser that behaves the way it does. dholbert is suggesting in this bug report that Firefox's behavior is buggy, based on the interpretation that transformed elements are not also positioned elements. At the very least, fixing Firefox's behavior would result in interop across all browsers — at which point the spec should (I say that informally) be amended accordingly.

Community
  • 1
  • 1
BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356