0

HTML で後でレンダリングされる要素を取得して、明示的な z-index を持つ要素の前に表示しようとしています - 以下を参照してください。

これが私の状況です：

(jsFiddle: http://jsfiddle.net/hephistocles/78Wpc/ )

関連する HTML:

<div id="header">
    <div id="slider"></div>
</div>
<div id="content">
    ...
</div>
<div id="footer">
    <div id="navigation">
</div>

関連する CSS:

#slider {
    z-index:20;
}
#navigation {
    position:absolute;
    top:200px;
}

ナビゲーションの前にスライダーとコンテンツをロードしたいので、ナビゲーションをフッターに入れました。次に、CSS を使用してナビゲーションをプルアップし、スライダーの上に表示されるようにします。

ドロップダウンをクリックできるように、ナビゲーションをスライダー (z-index ワイズ) の上にレンダリングする必要があります。また、スライダーをクリックできるようにしたい (そのため、z-index:-1 はオプションではありません)。#footer に position:static が必要なので、そこに z-index を設定できません。

答えは HTML をある程度再構築することにあると思いますが、可能であれば基本的な構成を維持したいと考えています。

前もって感謝します。

4

1 に答える 1

0

どちらの要素も同じスタック コンテキストにあるため、z-index: 21(より高いもの#slider) を に追加するだけで、より高い#navigationものをプッシュし#navigationます。フィドルを参照してください。

z-indexon #headerorを設定しないと仮定すると#footer（とにかく静的のままにしたいと言った）、スタックコンテキストが別の内部にネストされているという理由だけで、スタックコンテキストの変更はありませんdiv。z-indexが設定されると、子要素のスタック コンテキストが変更されます。

于 2012-08-10T19:30:20.473 に答える