1

すべての Web ページの上部に水平 div を挿入する拡張機能を開発しています。ほとんどのページで問題なく動作しますが、http://google.comでは、Google のナビゲーション バーが私のものの上に表示されます。stumbleUpon クロム拡張機能には、水平方向の div が Google のナビゲーション バーの上に表示されることを除いて、同様の機能があります。コンテンツ スクリプトを使用して div を挿入しています。body.prepend() を試しましたが、うまくいかないようです。また、スクロール位置に関係なくバーを上に固定してほしいです。position:fixed, top:0% として持っていますが、まだ運がありません。助けや正しい方向への指摘をいただければ幸いです。

4

1 に答える 1

1

このような状況に対処するときは、Webkit インスペクターで計算されたスタイル ボックスを必ず使用してください。問題の原因となっているスタイルで適切な要素を見つけるのに時間がかかる場合がありますが、それだけの価値はあります。

ここに画像の説明を入力

http://google.comで本文の先頭に div を追加し、次のスタイルを適用しました。

element.style {
  position: fixed;
  top: 0;
  left: 0;
  height: 35px;
  width: 100%;
  background-color: red;
}

赤が Google のナビゲーション バーの後ろから突き出ていることに気付いたので、おそらく z-index の問題であると考えました。

ここに画像の説明を入力

前に追加した div の z-index を 99999 に設定すると、期待どおりに表示されました。さらに調査したところ、Google の div #gbx3 の z-index は 990 で、その中のナビゲーション リンクの z-index は 991 であることがわかりました。Google のナビゲーション バーを隠したくないので、次のようにする必要があります。カスタム スタイルを設定します。

ここに画像の説明を入力

Google の div #mngb をスタイルする場合

element.style {
  position: absolute;
  top: 35px;
}

ここに画像の説明を入力

これにより、Google のナビゲーション バーが押し下げられますが、ページの他の部分は移動しません。

ここに画像の説明を入力

始めるにはこれで十分です。これは完璧ではなく、他のコンテンツの押し下げを処理できず、他のサイトに一般化されていませんが、あなたにとっては良いスタートです.

于 2012-09-19T22:18:56.487 に答える