11

インジェクションを使用してターゲット Web ページの要素を変更する chrome 拡張機能を作成しています。カーソルが要素上に移動したときにメッセージ バブルを表示したい。しかし、メッセージ バブルが他の要素によって隠されていることがあるという問題が発生します。要素 B が要素 A の上にある場合、z-index が機能しないため、要素 A の子要素 ​​(メッセージ バブル) が要素 B より高くなることはありません。

それを示すために、ここに例を示します。obj2 の z-index は 1000000 ですが、その obj2 は常に obj3 によって隠されます。

それに対する解決策はありますか？

.aaa{
    background-color:blue;
    width:100px;
    height:100px;
}
.ccc{
    background-color:red;
    width:80px;
    height:80px;
    z-index:1000000;
}
.bbb{
    background-color:green;
    position:relative;
    top:-50px;
    left:50px;
    width:100px;
    height:100px;
}

<div>
    <section id=obj1 class="aaa">
    <article id=obj2 class="ccc">
    </article>
    </section>
</div>
<section id=obj3 class="bbb">
</section>

ここに画像の説明を入力

4

1 に答える 1

19

z-index は、コンテナーが位置: 相対/絶対としてもマークされている場合にのみ適用されます。ルールを次のように変更するcccと、正しく機能します。

.ccc{
    position: relative;
    background-color:red;
    width:80px;
    height:80px;
    z-index:1000000;
}

http://jsfiddle.net/RrUbh/

于 2013-08-04T02:15:30.287 に答える