Home/ Questions/Q 8981827
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-15T20:25:53+00:00

Hi I have a problem with an CSS opacity line breaking intended output. Fiddle

  • 0

Hi I have a problem with an CSS opacity line breaking intended output.

Fiddle

Z-index on red div is 1, the blue has 206.
Now, remove from CSS (or change to 1.0).#menu {opacity: 0.8;}

Working as intended.

Can someone explain this?

Or more importantly how I make my darker div on top, while having a semi transparent div?
I’m not a CSS expert so it is quite possibly a user error.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Your problem is with an unexpected stacking context being established by #menu.

    To quote MDN:

    A stacking context is formed, anywhere in the document, by any element
    which is either

    • the root element (HTML),
    • positioned (absolutely or relatively) with a z-index value other than “auto”,
    • elements with an opacity value less than 1.

    This is the reason your div is behaving unexpectedly when you apply an opacity < 1 to it. #menu now establishes a separate stacking context, and the z-index of its descendant #status has no meaning outside of this context. To correct this problem, apply the z-index to #menu itself.

    • 0