CODEWITHSUNDEEP
cssopacity
Jisang Yoo
Jisang Yoo

Reputation: 3745

opacity value less than 1 and stacking without z-index

MDN - Stacking without z-index states that when no element in a page has a z-index, elements are stacked in this order:

  1. Background and borders of the root element
  2. Descendant blocks in the normal flow, in order of appearance (in HTML)
  3. Descendant positioned elements, in order of appearance (in HTML)

But that seems not the case when an element of opacity less than 1 is involved:

http://jsfiddle.net/pbQfY/2/

Is it safe to assume that the real order is the following?

  1. Background and borders of the root element
  2. Descendant blocks in the normal flow, in order of appearance (in HTML)
  3. Descendant positioned elements and descendant elements that create stacking context, in order of appearance (in HTML)

Upvotes: 3

Views: 466

Answers (1)

0b10011
0b10011

Reputation: 18795

Looks like that MDN article is just the basic version of the actual stacking contexts explanation, which is also touched on in the visual formatting module. However, this particular gotcha is from the CSS color module (emphasis mine):

Since an element with opacity less than 1 is composited from a single offscreen image, content outside of it cannot be layered in z-order between pieces of content inside of it. For the same reason, implementations must create a new stacking context for any element with opacity less than 1. If an element with opacity less than 1 is not positioned, implementations must paint the layer it creates, within its parent stacking context, at the same stacking order that would be used if it were a positioned element with ‘z-index: 0’ and ‘opacity: 1’. If an element with opacity less than 1 is positioned, the ‘z-index’ property applies as described in [CSS21], except that ‘auto’ is treated as ‘0’ since a new stacking context is always created. See section 9.9 and Appendix E of [CSS21] for more information on stacking contexts. The rules in this paragraph do not apply to SVG elements, since SVG has its own rendering model ([SVG11], Chapter 3).

Upvotes: 4

Related Questions