CODEWITHSUNDEEP
cssz-indexopacity
Tobis
Tobis

Reputation: 117

Div, z-index, opacity. Bug, feature or user relate issue?

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.

Upvotes: 0

Views: 144

Answers (1)

user1726343
user1726343

Reputation:

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.

Upvotes: 1

Related Questions