Inaccurate info in "Example 1" on creating new stacking context #42296
Description
MDN URL
https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Positioned_layout/Stacking_context/Example_1
What specific section or headline is this issue about?
Description
What information was incorrect, unhelpful, or incomplete?
This sentence is ambiguous:
It happens that, since DIV #1 and DIV #3 are not assigned any z-index value, they do not create a stacking context.
It can leave room for interpretation that z-index alone creates a stacking context when set.
Also, further down on the text, there's a "Note" which contains this sentence:
assigning an opacity less than 1 to a positioned element implicitly creates a stacking context, just like adding a z-index value.
Implying that the element needs to be positioned for "opacity with less than 1" to create a stacking context. But just assigning an opacity less than 1 creates a context, period.
What did you expect to see?
For the first sentence, an clearer explanation that z-index could create a stacking context since it would be paired with the position set to a value other than static in DIV 1 and 3.
For the second sentence, it could just say "It is important to remember that assigning an opacity less than 1 to a positioned an element implicitly creates a stacking context. , just like adding a z-index value.
Do you have any supporting links, references, or citations?
A stacking context is formed, anywhere in the document, by any element in the following scenarios:
[...]
Element with an opacity value less than 1.
Cascading Style Sheets (CSS) Level 2
stacking contexts are generated by any positioned element (including relatively positioned elements) having a computed value of z-index other than auto.
Cascading Style Sheets (CSS) Level 2
An element is said to be positioned if its position property has a value other than static.
Do you have anything more you want to share?
This relates to #42293 and #42299.
MDN metadata
Page report details
- Folder:
en-us/web/css/guides/positioned_layout/stacking_context/example_1 - MDN URL: https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Positioned_layout/Stacking_context/Example_1
- GitHub URL: https://github.com/mdn/content/blob/main/files/en-us/web/css/guides/positioned_layout/stacking_context/example_1/index.md
- Last commit: 85fccef
- Document last modified: 2025-11-07T15:58:06.000Z