Stacking order of elements affected by opacity

by

Positioned elements with a z-index value other than “auto” and elements with an opacity value less than 1 generate a stacking context. Refer to the rules regarding the painting order.

In your first example we have the root stacking context with various descendants including:

  • positioned green box with positive z-index
  • positioned blue box with auto z-index

The blue box with auto z-index is placed behind; green box with positive z-index is placed in front (see rule no. 8 and 9).

In your second example we have:

  • an element with opacity (which contains green box; note that z-index on the green box becomes local to this element)
  • positioned blue box without z-index

Both elements fall under same category (see rule no. 8). In which case the HTML order determines which element appear in front. The blue box appears later in the source order so it appears in front.

More Related Contents:

  1. Why can’t an element with a z-index value cover its child?
  2. z-index not working with fixed positioning
  3. Understanding z-index stacking order
  4. Is it possible to set the stacking order of pseudo-elements below their parent element? [duplicate]
  5. IE7 Z-Index Layering Issues
  6. z-index is canceled by setting transform(rotate)
  7. Which CSS properties create a stacking context?
  8. How to get a parent element to appear above child [duplicate]
  9. What has bigger priority: opacity or z-index in browsers?
  10. How to make child element higher z-index than parent? [duplicate]
  11. IE7 Z-Index issue – Context Menu
  12. Z-Index Relative or Absolute?
  13. Internet Explorer z-index bug?
  14. z-index does not work in Internet Explorer with pdf in iframe
  15. Z-index with before pseudo-element
  16. css z-index issue with nested elements
  17. ::before pseudo-element stacking order issue
  18. Float a div above page content
  19. Bootstrap Modal sitting behind backdrop
  20. Why does stacking order change on webkit filter hover?
  21. CSS negative z-index: what does it mean?
  22. blur everything but hovered CSS
  23. CSS3 Transparency + Gradient
  24. Gradients in Internet Explorer 9
  25. Extending selectors from within media queries with Sass
  26. Equal height of elements inside grid item with CSS grid layout
  27. How would you make two s overlap?
  28. Why use an HTML5 semantic tag instead of div? [duplicate]
  29. What is the difference between default, user and author style sheets?
  30. There is a 4px gap below canvas/video/audio elements in HTML5

Leave a Comment