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.

4

1 に答える 1

1

問題は、によって確立される予期しないスタック コンテキスト#menuにあります。

MDNを引用するには:

スタッキング コンテキストは、ドキュメント内の任意の場所で、次のいずれかの要素によって形成されます。

  • ルート要素 (HTML)、
  • "auto" 以外の z-index 値で (絶対的または相対的に) 配置され、
  • 不透明度が 1 未満の要素。

これが、不透明度 < 1 を適用すると、div が予期せず動作する理由です。#menuは別のスタック コンテキストを確立するようになり、その子孫の z-index は#statusこのコンテキストの外では意味を持ちません。この問題を解決するには、z-index を#menuそれ自体に適用します。

于 2012-12-13T20:14:35.053 に答える