web-dev-qa-db-ja.com

ブラウザーの不透明度またはZ-indexの優先順位が最も高いものは何ですか？

私はJavaScriptで「ポップアップウィンドウ」をコーディングしていて、興味深いことに遭遇しました。

Cropped screenshot demonstrating strange stacking behavior

ポップアップウィンドウの下にある海軍の正方形は、非表示になっているはずですが表示されています。ポップアップは正方形の後に追加されたので、それが一番上になるはずです。

海軍広場のCSS opacityプロパティは0.3です。私が試したものから、区間(0,1)のすべての数値が同じ結果をもたらすようです。 1に変更すると、期待どおりに動作します（つまり、ポップアップの下の四角形の部分が非表示になります）。

正方形の場合はz-indexプロパティを10に、ポップアップの場合は100に設定しようとしましたが、何も変更されません。

何が欠けていますか？なぜ正方形の一部が表示されるのですか？

テスト済みブラウザ：

  • Firefox 3.6.x
  • Chrome 4
cssz-indexopacity
48
Martin Vseticka

これはバグではなく、実際にはどのように機能するかです。 スタッキングコンテキストの詳細な説明 は何も言及していないため、少し混乱します。ただし、 ビジュアルフォーマットモジュール は カラーモジュール にリンクしており、この特定の問題が見つかる（強調は私のものです）：

不透明度が1未満の要素は単一のオフスクリーン画像から合成されるため、その外部のコンテンツは、その内部のコンテンツの断片の間にzオーダーで重ねることはできません。同じ理由で、実装は不透明度が1未満のすべての要素に対して新しいスタックコンテキストを作成する必要があります不透明度が1未満の要素が配置されていない場合、実装は作成するレイヤーをペイントする必要があります。親スタックコンテキスト内で、「z-index：0」および「opacity：1」の位置付けられた要素と同じスタック順序で使用されます。不透明度の要素の場合1未満が配置されている場合、[z-index]プロパティは[CSS21]で説明されているように適用されますが、新しいスタッキングコンテキストは常に作成されるため、「auto」は「0」として扱われます。スタックコンテキストの詳細については、[CSS21]のセクション9.9および付録Eを参照してください。 SVGには独自のレンダリングモデル（[SVG11]、第3章）があるため、この段落のルールはSVG要素には適用されません。

51
0b10011

スタッキングコンテキストに関連するz-indexではなく、opacityがz-indexよりも重要であるという問題ではありません（CSS2仕様の z-index を参照） ）。

言い換えると、z-indexは、配置された祖先のコンテキスト内でのみ意味があります（その相対、絶対、または固定）。問題を修正するために必要なことは、ポップアップと海軍の正方形の両方を含む要素にposition: relative;を追加し、おそらくz-index: 1;を追加することです。スクリーンショットを見ると、おそらくラッパーdivなどの最上位の要素になります。

20
Guillaume Esquevin

Divのような2つの要素の回避策：0.99不透明度を一番上の要素に追加すると、両方の順序が再確立されます。

opacity: 0.99;
5
Enzo DB

この問題をデバッグするには、サンプルコードが必要になる場合があります。

あなたは置くかもしれませんoverflow: hiddenとおそらくposition: relative内のDIVは、すべてのエディターオブジェクトを囲み、要素をそのDIV内にのみ強制的に描画しようとします。たとえば、

<div style="overflow: hidden; position: relative">
    (Editor object buttons go here)
</div>

最後の手段として、2つの要素の間にiframeを挿入して、それらの透過を停止することもできます。

1
cryo

同じ問題がありました。色/不透明度の代わりにRGBAを使用すると、問題が解決しました。 （Bootstrapフレームワーク）で）LESSを使用して、fade（）関数が変換を行いました。

0
Peter Janes

新しいスタイルまたはクラスを適用してもスタイルが変更されないように、!importantを使用して次のようにポップアップウィンドウのDIVを設定しようとする場合があります。

background-color: white !important;
z-index: 100 !important;
opacity: 1.0 !important;

次に、新しいCSSクラスを作成します。

.PopupElement
{
 z-index: inherited;
 opacity: inherited;
}

そして、例えば次のように、ウィンドウ内のすべての要素にクラスを追加します。

<input value="posx" class="some_class PopupElement"/>

私の推測では、CSS属性の適用には優先順位がないため、これでうまくいくと思います。 =）

0
Cipi

@Guillaume Esquevinはすでに素晴らしい答えを出しましたが、（私がしたように）スタッキングコンテキストが何であるかを誰かが無視した場合に備えて、私はそれを拡張してみます。

here を読むことができるように、スタック内で一緒に移動する親を共有する要素のグループを指す、スタックコンテキストと呼ばれるものがあります。例として、divとそのすべての子があります。

スタックコンテキストを作成する方法は3つあります。ドキュメントのルート（html要素）で、親要素を配置し、親の不透明度を1未満に変更します。

次に、不透明度が1未満のdivがあり、このdivの兄弟要素をその背後に表示したい場合（およびその子）、位置を相対に設定するか、または変更することにより、そのような兄弟に新しいスタックコンテキストを作成できますその不透明度も同様です。

0
Mr. Duhart