なぜ不透明度によって位置が変わるのですか

私は位置決めを理解しようとしていますが、absoluteに問題があります。なぜ不透明度によって位置が変わるのですか

私が理解するところでは、絶対配置された要素は通常のドキュメントフローから完全に削除されます。彼らの周りの要素が懸念される限り、絶対配置された要素は存在しません。

次に、最初の親要素との関連で、position: static;を持たない位置に配置されます。そのような要素がない場合、position：absoluteの要素は<html>を基準にして配置されます。

ここで私は3つの異なるdivで1つの色でそれぞれを作成しました。 3つすべての不透明度は0.5です。 - >https://jsfiddle.net/uwqoy4zh/

私は位置に2番目のdivに設定します。絶対に、彼は流れから除去され、したがって、私はその場所にピンク色のいずれかを参照してくださいされる - >https://jsfiddle.net/401ykurg/しかし

、私は正確に行います同じことだけど、不透明度を変えると、流れから取り除かれたのはピンクのものです！ - >https://jsfiddle.net/qnou6Lya/

私は強調していませんか？

また、私は、実際に位置が青ではなくピンクの後ろにあるところで動作する（流れから黄色のものを取り除く）例ではわかります。

黄色のビット幅の広い作るとき、私はこれを見ることができます - >https://jsfiddle.net/tszm65cu/

を絶対位置が、それはそのような要素はありませんときにはposition: staticを持っていない持っている最初の親要素に関連して配置されている場合は、 position: absoluteの要素はドキュメントウィンドウに対して配置されますが、なぜ青色のdivの下に黄色のdivが配置されませんか？

黄色には上またはその他のものがありません。また、絶対、相対、固定の位置付けが適用された親要素がないため、それをウィンドウに表示する必要があります。

なぜですか？

ありがとうございました！

出典

2015-12-17 New to this

不透明度はZ-インデックス値に影響を与えます。 –

MDNのスタッキングコンテキスト：https：//developer.mozillaを参照してください。org/ja-jp/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context –

http://philipwalton.com/articles/what-no-one-told-you-about-z-index/ –

不透明度の位置に影響を与えていません。

黄色にすると、その不透明度に関係なく、フローからそれを削除します。divこれに加えて、top: 0とleft: 0のようなものは記載されていないので、それはどこに残っています。

2番目のフィドルでは、フローから黄色に見えるものは、それぞれが50％の不透明度を持つため、実際にはピンクと黄色が混ざっています。黄色は上に、ピンクは下にあります。 3番目のフィドルでは、黄色も上にありますが、不透明度が100％であるため、ピンク色のものがフローから削除されたように見えますが、実際はその下にあります。

z-indexを詳細に調べて、どちらが上にあるかを制御できます。

出典

2015-12-17 17:47:06

今、私はそれを得る！あなたの説明と助けをありがとう！ –

position：absoluteを使用すると、スタッキングコンテキストが作成されます。黄色の要素を表示するには、表示の優先順位を設定するためにz-indexを使用する必要があります。

1未満の不透明度を持つ要素は、単一オフスクリーン画像から合成されるので、外部コンテンツは、それの内部コンテンツのピースの間のz順序に積層することができません。同様の理由から、の実装では、不透明度が1未満の任意の要素の新しいスタッキングコンテキストを作成する必要があります。不透明度が1未満の要素がでない場合、実装は作成するレイヤーを親スタック化コンテキスト'z-index：0'と 'opacity：1'を持つ配置された要素であれば、が使用される同じ積み重ね順で並べ替えられます。不透明度が1未満の要素が配置されている場合は、という新しいスタッキングコンテキストが作成されているため、 'auto'は '0'として扱われる点を除いて、[CSS21]の説明に従って 'z-index'プロパティが適用されます。スタッキングコンテキストに関する詳細はの情報については、9.9節と[CSS21]の付録Eを参照してください。 SVG要素には独自のレンダリングモデル（[SVG11]、第3章）があるので、この段落の規則はをSVG要素に適用しません。

チェックこのフィドル： https://jsfiddle.net/401ykurg/1/

opacity: 0.99; 
    z-index: 1;

フィリップ・ウォルトンは、その上の美しい記事を書きました： http://philipwalton.com/articles/what-no-one-told-you-about-z-index/

出典

2015-12-17 17:23:21

その記事を愛し、それをすべて共有してください時間！ –

例では、3つのdiv要素がすべてstaticallyの位置にあります。これは、配置要素のデフォルトの動作を参照しています。要するに、それらはHTMLでレイアウトしたときとまったく同じ位置に配置されます。

ただし、絶対配置された要素は、その非静的祖先要素に対して相対的に配置されます。したがって、あなたがそうした祖先を定義していない限り、絶対配置された要素はボディに対して落ち、他の要素の静的配置には影響しません。

それはあなたと何が関係がありますか例？あなたの例では、不透明度を扱っています。要素を特定のパーセンテージで透明にすると、視覚要素が透けて見えるようになります。

要素の1つにposition: absoluteを使用すると、その要素をページ内の他の要素と一緒にフローから移動します。あなたのケースでは、すべての要素の寸法が同じであるため、絶対配置要素のデフォルト動作は、絶対配置されていない要素の直下（または上）にあります。両方の要素が透明で背景色が異なるため、不透明度に戻って考えてみましょう。他の色の上に重なり合う色の性質のために、重なり合ったカラーブリード効果が本質的に生じました。

絶対配置された要素divは消滅しないので、絶対配置されていない他のdivの1つの直下に直接置かれます。かなり楽しいとファンキーな動作が、それはあなたの絶対配置された要素がどのように動作していることから非常に明確です。

出典

2015-12-17 19:28:38 AGE

なぜ不透明度によって位置が変わるのですか

答えて

関連する問題