web-dev-qa-db-ja.com

CSS Z-Indexスタッキングコンテキストを上書き

要素のスタッキングコンテキストをオーバーライド/無視して、ページルートを基準にしてz軸に配置できるようにしています。

ただし、記事 によると、Z-Indexについて誰も言わなかったこと ：

要素がスタック順序の一番下のスタックコンテキストに含まれている場合、Zインデックスを使用しても、その要素がスタック順序の上位にある別のスタックコンテキストの別の要素の前に表示されるようにする方法はありません。億の！

新しいスタックコンテキストは、次の3つの方法のいずれかで要素に形成できます。

  • 要素がドキュメントのルート要素である場合（要素）
  • 要素にstatic以外の位置値とauto以外のz-index値がある場合
  • 要素の不透明度の値が1未満の場合

次の例では：

.red, .green, .blue { position: absolute; }
.red   { background: red; }
.green { background: green; }
.blue  { background: blue; }
<div><span class="red">Red</span></div>
<div><span class="green">Green</span></div>
<div><span class="blue">Blue</span></div>

最初のdivが指定されている場合opacity:.99;（最初のノードに 新しいスタッキングコンテキスト を作成します）、次にif .redにはz-index:1、他の要素の後ろに配置されます。これは、そのスタック内で最上位の要素としてレンダリングされるだけだからです。

jsFiddleのデモ

これは次のようになります。

demo

[〜＃〜] q [〜＃〜]：要素がその親要素のスタックコンテキストを無視して質問する方法はありますかページの元のスタックコンテキストに相対的に配置されますか？

cssz-index
26
KyleMit

[〜＃〜] q [〜＃〜]：要素がその親要素のスタックコンテキストを無視して質問する方法はありますかページの元のスタックコンテキストに相対的に配置されますか？

いいえ、DOMで要素を再配置せずに、スタックされたコンテキスト間で配置された要素を転送することはできません。 position: fixedまたはposition: absoluteを使用して要素をルートスタッキングコンテキストに移動することもできません（既にお気づきのように、.redはその親div:first-childに対して相対的に配置されています。新しいスタッキングコンテキストを作成します）。

そうは言っても、他の回答や here に示されているように、HTMLとCSSを使用してクラスをdiv要素に再割り当てするのは簡単です。すべてのdiv sおよびspansは、ルートスタッキングコンテキストに参加します。

<div class="red"><span>Red</span></div>
<div class="green"><span>Green</span></div>
<div class="blue"><span>Blue</span></div>

しかし、おそらく状況は思ったほど単純ではありません。

21
BoltClock

スタッキングコンテキスト で述べたように、「z-indexを使用すると、特定の要素のレンダリング順序はそれらのz-index値の影響を受けます。これは、これらの要素に特別なプロパティがあり、それらがスタッキングコンテキスト。

スタックコンテンツの問題を部分的に克服するには、cssプロパティを使用して不要な要素を表示できます。

opacity: 0.1;

または

display: none;
0
Roman