web-dev-qa-db-ja.com

IE / Firefox / Chrome /などで、スタックコンテキストを確認する方法はありますか？

Zインデックスの問題を追跡しようとしています。 IE9のDOM Inspectorでページを表示していますが、わかりません。

Z-Indexが10000の要素とZ-Indexが7000の別の要素がありますが、Z-Index 10000はZ-Index 7000の下に描画されています。明らかに、階層のどこかで、スタックコンテキストが設定されています、しかし私は階層を上下にブラウズしていて、それを見つけることができませんでした。

これらの2つの要素以外には、私が見る限り、z-indexが設定されています。そして、不透明度の値セットとしては何もありません。私はこれをFF5とIE9で見ているので、古いIE <7スタッキングコンテキストバグではありません。

ブラウザーのいずれかに、スタックコンテキストを設定している要素を通知するツールがありますか？

ありがとう。

z-index
44
Jeff Dege

Chrome https://github.com/gwwar/z-context を使用する場合、次のように簡単な拡張機能です。

  • 現在の要素がスタックコンテキストを作成する場合、およびその理由
  • その親スタッキングコンテキストとは
  • Zインデックス値

aprohl5が言ったように、重要です：z-indexプロパティは、位置が明示的に固定、絶対、または相対に設定されている場合にのみ、スタックの順序に影響を与えることができます。

これはSassで注文を管理するための良い方法です https://www.smashingmagazine.com/2014/06/sassy-z-index-management-for-complex-layouts/

25
iianfumenchu

MS Edgeの現在のベータ版には、「Microsoft Edge DevToolsで3Dビューを使用してz-indexスタッキングコンテンツをデバッグする」という機能が追加されました。

"z-indexスタッキングコンテキストのデバッグに役立つ新機能。一般的な3Dビューは、色とスタッキングを使用してDOM（Document Object Model）深度の表現を示し、z-Indexビューは、ページのさまざまなスタックコンテキストを分離します。 "

https://blogs.windows.com/msedgedev/2020/01/23/debug-z-index-3d-view-Edge-devtools/

1
Tim Hodgson