html - 要素を別の要素の下に重ねるにはどうすればよいですか?

Question

http://jsfiddle.net/pzRV8/

そのコード スニペットの一番下に、 という名前のセクションがありcontainerます。今、ドロップ シャドウを下ではなく上に重ねようとしています。ありがとう。

Answer 1

配置と z-index に基づく DOM 要素レイヤー。z-index が高いほど、要素が高くなります (0 が一番下のカード、51 が一番上のカードであるトランプのデッキを想像してください。数字は負の値になることもあります)。z-index が正しく機能するには、要素の位置が絶対位置である必要があります。

絶対位置

position: absolute;

Z-インデックス

z-index: 0;

変更を加えるには (静的であり、私は静的コンテンツのファンではありませんが)、これを試してください:

これをコンテナ定義に追加します。

position: absolute;
z-index: -1;

header definitionのマージンの下部を次のように変更します。

margin-bottom: 352px;

例: http://jsfiddle.net/wh8tX/

Answer 2

z-indexプロパティを介して目的の結果を達成できますが、ポジショニングでのみ作業することを覚えておいてください。そのため、 & クラスz-indexでポジショニングを定義しました。.spotlight.container

デモをチェック

私はあなたがこのように見えることを願っています:- http://jsfiddle.net/pzRV8/6/

Answer 3

あなたはそれが必要zindexです。rememberzindexは でのみ機能しpositionます。位置は相対、固定、絶対

<div style="zindex:1; position:relative">first</div>
<div style="zindex:2; position:relative">second</div>