Misleading "Example 3" about stacking context

[nneto]

MDN URL

https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Positioned_layout/Stacking_context/Example_3

What specific section or headline is this issue about?

Description

What information was incorrect, unhelpful, or incomplete?

1

The example description fails to mention that every element creates a stacking context, since all elements are divs, and all divs have opacity: 0.9 set in the example CSS. Removing the translucency changes the example behavior.

2

It's not clear what "second-level menu" refers to. Does it refer to the element with id="container1" or the elements with class="lev2"? Because, there's the sentence "The second-level menu is absolutely positioned" (#container1 is the one absolutely positioned) and then it's said "for each second-level menu" (by "each" then it means more than one element, so not the #container1...).

3

Also, in regards to the phrase "for each second-level menu, a stacking context is created", if that was about the container1, it would be correct saying it creates a stacking context. But "each" implies "more than one", so we assume it refers to the divs with class="lev2", and saying that each of them creates a stacking context is wrong.

4

There's this sentence, which is simply incorrect:

The first-level menu is relatively positioned, creating a stacking context.

An element being positioned alone isn't enough to create a stacking context, unless paired with a z-index other than auto.

What did you expect to see?

1. Any recognition that the opacity: 0.9; is actually creating stacking contexts for everything in the example and affecting how it behaves;
2. Clearer description about what "menu"/"menus" refers to in the example code;
3. Not attributing the creation of stacking contexts to the position: relative alone.

Do you have any supporting links, references, or citations?

Stacking context - CSS | MDN

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 #42296.

MDN metadata

Page report details

• Folder: en-us/web/css/guides/positioned_layout/stacking_context/example_3
• MDN URL: https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Positioned_layout/Stacking_context/Example_3
• GitHub URL: https://github.com/mdn/content/blob/main/files/en-us/web/css/guides/positioned_layout/stacking_context/example_3/index.md
• Last commit: 85fccef
• Document last modified: 2025-11-07T15:58:06.000Z

[guptakaran20]

Hello, thank you for the detailed explanation, and it all makes perfect sense.
“I'd be happy to help implement this modification of the example description,” you say, “as I think it would help avoid confusion with attributing it solely to position: relative.”
If not already in development by someone, I could give this a shot and write a PR.

[estelle]

If not already in development by someone, I could give this a shot and write a PR.

Hi Karan;

Thanks for offering to solve this issue. When ready to work on this, under "assignees", assign yourself.

Thanks @guptakaran20.