z-index conundrum - AがBの子でCがBの上に表示されている場合、AはCの上に表示できますか？

私はこの1つのタイトルを定式化するのにいくつか問題がありました。z-index conundrum - AがBの子でCがBの上に表示されている場合、AはCの上に表示できますか？

状況がある：

<body> 
    <div id="B"> 
     <div id="A"></div> 
    </div> 
    <div id="C"></div> 
</body>

Bは、フルスクリーンのdivであり、Cは、絶対位置フッター要素であり、常にB.

Aが内部ポップアップある含む他のすべての要素を、上に表示B、このポップアップの位置が変更されるため、フッターに重なることがあります。問題は、親のdivがフッターの下に残っている間に、このポップアップをフッターに表示する必要があることです。これは可能ですか？単にAのz-インデックスを変更するだけで何もしません。

現在のCSS：

#B{ 
    width:100%; 
    height:100%; 
    z-index:1; 
} 

#A{ 
    position:absolute; 
} 

#C{ 
    position:absolute; 
    bottom:0; 
    width:300px; 
    height:60px; 
    left:50%; 
    margin-left:-150px; 
    z-index:5; 
}

私はBのうちを取り、直接体内に配置可能性が実現したが、これは、いくつかのJavascriptを書き換える意味するだろう、との重複の種類場合も、私は好奇心が強いです上述したように可能である。

出典

2017-05-23 jovan

推奨読書：[Philipp Walton - あなたがZ-Indexについて語ったことはありません]（https://philipwalton.com/articles/what-no-one-told-you-about-z-index/） – CBroe

z-index conundrum - AがBの子でCがBの上に表示されている場合は、Cの上にAを表示できますか？

BはAのスタッキングコンテクストを確立する場合、いいえ、AはBのスタッキングコンテクストで単離され、スタッキングコンテクスト自体はBを意味し、これらのボックスと重なっていない限り、そのスタッキングコンテクスト（外箱と重複できないのでしなければなりませんオーバーラップC）。

だから、AをBから外したり、Bがスタッキングコンテキストを確立しないようにすることができない場合はできません（z-index: 1あなたの例では何の宣言が役立つのかはっきりしませんが、あなたの実際のレイアウトにはこのオプションが簡単になります）。

出典

2017-05-23 10:33:54 BoltClock

B （絶対的な）位置が設定されていますが、私は不必要に物事を複雑にしないためにそれを残しました。だからこそz-indexを持っているのです。さて、私はHTMLの構造を少し修正する必要があります。 – jovan

@ jovan：ええ、私は似たような状況にいました。あなたはしばらくしてそれに慣れます。 – BoltClock

z-index conundrum - AがBの子でCがBの上に表示されている場合、AはCの上に表示できますか？

答えて

関連する問題