絶対位置のないZ-インデックス

Question

負のマージンのようなCSSトリッキーの結果として、HTMLドキュメントの後にHTMLコンテンツの下にレンダリングされるHTMLがある場合があります。オリジナルの要素は技術的には後の要素の下にあるはずですが、私は上記の後の要素を表示したいと思います。

絶対位置を指定しなくても、別の要素の上にHTML要素を表示させることはできますか？絶対的な位置なしでは、Z-インデックスは何の効果もないように見える。

Answer 1

あり：position:relative; z-index:10を使用してください。

z-indexは、position:static（デフォルト）には影響しません。

z-indexはグローバルレイヤリングシステムではなく、各位置指定された親内の順序付けを区別することに注意してください。あなたが持っている場合：

<style type="text/css"> 
    div { position:relative } 
    #a { z-index:1 } 
    #a1 { z-index:99 } 
    #b { z-index:2 } 
</style> 
... 
<div id="a"><div id="a1">SUPER TALL</div></div> 
<div id="b">I WIN</div> 

を#bが#aの上に積層されているので...その後#a1は、b上にレンダリングすることはありません。あなたは常にz-indexは必要ありません：あなたは私がPhrogz」答えは既に受け入れられ、そしてそれは良い答えが、ちょうどレコードにされています知っているhttp://jsfiddle.net/DsTeK

Answer 2

で、このデモを見ることができます。

1つの要素にposition:relativeがある場合、position（またはposition:static）のない他のすべての要素の上にも表示されます。たとえあなたがz-indexを全く持っていなくても！

jsFiddle。