4

Webページに不透明度を設定するときに、非常に奇妙な問題が発生しました。不透明度のある要素は、ページ上の他の要素を覆い隠します。これは、Safari、Chrome、Firefoxで発生します。IE7および8では不透明度は無視されます。IE9ではテストされていません。

フィドル

<style>
   #content { opacity: .92; background: #dfd; height: 300px;}
   #sidebar { width: 200px; float: right; background: #fdd; height: 200px; }
</style>
<div id="sidebar"></div>
<div id="content"></div>

不透明度を削除すると、期待される動作が復元されます。もう1つの可能な修正は、不透明度の代わりにrgba背景値を使用することです。

他の誰かがこれに遭遇しましたか？もしそうなら、どのようにそれを修正しましたか？

4

2 に答える 2

6

設定している不透明度#contentは、新しいスタッキングコンテキストを作成することであり、スタッキングコンテキストはzインデックスに影響します。z-indexを手動で指定しなかったため、それらは自動的に割り当てられ、マークアップの後半にあるため#contentよりも高い値になります#sidebar。

単純なCSSソリューション：に追加position: relative; z-index: 2するだけです#sidebar（さらに別のスタッキングコンテキストを確立するため）。#content実際のコードでは、以下にさらに要素がある場合は、z-indexも追加する必要があります#wrapper。

#sidebar { position: relative; z-index: 2; /* etc */ }

http://jsfiddle.net/V4MrH/3/

于 2013-03-21T21:21:39.603 に答える
3

この問題はすでにわかっています。 https://www.google.com/#q=opacity%20change%20z-index

広くサポートされているプロパティでもあるrgbabackgroundを使用する必要があります。

于 2013-03-21T21:14:37.067 に答える