4

だから私は今日z-indexを試してきましたが、ここで何が起こっているのか本当にわかりません.

HTML の非常に簡略化されたバージョンを次に示します。

// content has z-index of 30, pos abs
<div class="content">
    // content-centered has z-index of 32, pos rel
    <div class="content-centered">
        // Text and buttons goes here
    </div>
</div>

// bubbles has z-index of 31, pos abs
<div class="bubbles">
    <div class="bubbles-centered">
        // Bubbles goes here
    </div>
</div>

目標は、.content で背景コンテンツを提供し、次に背景の上にバブルを提供し、最後にバブルの上にコンテンツを提供することです。起こっていることは、何らかの理由で泡がコンテンツの上にあるということです。

デモを参照してください: http://jsfiddle.net/zFFkv/1/

泡がコンテンツの上に表示されるまで数秒待ちます。バブルレイヤーは下に設定されていますが、コンテンツレイヤーの上にあるため、テキストを選択したり、ボタンを押したりすることはできません。どうしたの？子要素は親のインデックスを継承しませんか?

何か案は？

4

2 に答える 2

3

z インデックスは、ドキュメント全体ではなく、親に対して解決されます。

.bubbles以上.contentであり、それがあなたの場合に重要なことです。内部のすべての子.contentは下.bubblesになりますが、相互に相対的に並べることができます。

あなたがやろうとしていることをするためには.content-centered、.bubbles兄弟でなければなりません。

于 2012-12-19T21:07:44.040 に答える
2

IE で十分にサポートされているとは思いませんが、bubble 要素で pointer-events を none に設定して、以下のリンクをブロックしないようにすることができます。

.bubbles {
     pointer-events: none;
}

デモ

于 2012-12-20T09:00:34.703 に答える