13

現在、Chrome 用のオープンソース プラグインを作成しています。かなり完成していますが、解決しようとしているバグがいくつかあります。基本的に、すべての Web ページを移動する div (ページの HTML に挿入される) は、表示されるように最上位の要素である必要があります。これは、z-index @ 999 によって達成されます。ただし、一部の Web ページでは、これが機能しません。

code.google.com にログインすると、メニュー バーが私の div の上に重なって表示されます。

Web 開発者が何をしても、注入されたときに強制的に最上位にするにはどうすればよいですか?

divのCSSは次のとおりです。

#ezselected {
  -webkit-transition: all .2s ease-in-out;
  -moz-transition: all .2s ease-in-out;
  -o-transition: all .2s ease-in-out;
  -ms-transition: all .2s ease-in-out;
  transition: all .2s ease-in-out;
  position:absolute;
  border-radius: 15px;
  z-index: 999;
  -webkit-box-shadow: 0px 0px 15px 5px rgba(255, 255, 100, .80);
  -moz-box-shadow: 0px 0px 15px 5px rgba(255, 255, 100, .80);
  /*box-shadow: 0px 0px 15px 5px rgba(255, 255, 100, .80);*/
  pointer-events:none; /* Make click-able through the DIV (for example, if it's on top of something with an event with kb) */
}

PS、私は !important を無駄にしようとしました。

ありがとう！

4

1 に答える 1

17

z-index は 999 です。この場合にカバーしようとしている要素 (クラス .menuDiv が添付された要素) の z-index は、1001 の z-index を持っています。999 は、最大 z-インデックス値ブラウザが許可するため、挿入された div は、より高い z-indexed 要素よりも下になります。

あなたの質問が受け取ったコメントの 1 つに従って、許容される z-index 値と、最大レベルの要素 (通常は +2147483647) を作成しようとしている場合に使用するものについての議論については、Z-INDEX の最小値と最大値を参照してください。

この要素を何にも重ねたくないことがわかっている場合 (注意: 要素が同じものを使用している可能性がある場合を除く)、次を使用します。

z-index: 2147483647;

ある程度の柔軟性を維持したい場合は、少し低いものを使用することを検討してください。競合する要素によって重ねられる可能性のある数回は、おそらくそれだけの価値があります. z-index 値が Max に近い限り、プラグインでレンダリングの問題が発生する可能性が気にならない場合は、z-index を自分より上に下げるスクリプトを作成することもできます。

同様の状況が再び発生した場合、Chrome にはかなり優れた組み込みの検査ツールがあります。問題の原因となっている要素を右クリックし、要素を検査してから、右側の表示領域で [Computed Style] を展開します。z-index は追跡が難しい場合があることに注意してください (「継承されたビュー」がオンになっている場合でも): 静的な内部要素ではなく、適切に配置された div/etc を選択する必要があります。巣が見つかるまで、巣から離れ続けてください。

于 2012-12-06T21:23:02.430 に答える