CSS z-indexが機能しない（絶対位置）

Question

2番目の黄色（絶対）の上に黒いdiv（相対）を作成しようとしています。黒いdivの親も絶対的な位置を持っています。

コード：

<div class="absolute"> 
    <div id="relative"></div> 
</div> 
<div class="absolute" style="top: 54px"></div> 
<style> 
#relative { 
    position: relative; 
    width: 40px; 
    height: 100px; 
    background: #000; 
    z-index: 1; 
    margin-top: 30px; 
} 
.absolute { 
    position: absolute; 
    top: 0; left: 0; 
    width: 200px; 
    height: 50px; 
    background: yellow; 
    z-index: 0; 
} 
</style> 

jsFiddle：二つの要素がインデックス0を持っているので

<div class="absolute" style="top: 54px"></div> 
<div class="absolute"> 
    <div id="relative"></div> 
</div> 

：http://jsfiddle.net/P7c9q/

Answer 1

.absoluteから

z-index:0; 

を削除します。 DOM内の順序が上にあるかを決定するように、両方がゼロのzインデックスを持っているので、あなたが最初のものの上に第二のdivを配置する必要があり

Updated fiddle here.

Answer 2

ただ、他の.second divの前に、第2 .absolute div要素を追加します。

Answer 3

これは、Stacking Contextでは、z-indexを設定すると、すべての子にも適用されます。

子孫の代わりに2つの兄弟を作ることができます。

<div class="absolute"></div> 
<div id="relative"></div> 

http://jsfiddle.net/P7c9q/3/

Answer 4

このコードを試してみてください。

.absolute { 
    position: absolute; 
    top: 0; left: 0; 
    width: 200px; 
    height: 50px; 
    background: yellow; 

} 

http://jsfiddle.net/manojmcet/ks7ds/

Answer 5

JSFiddle

。これは、相対位置付けdivにも影響します。これは、そのZ-インデックスが親div内の要素に関連するためです。

<div class="absolute" style="top: 54px"></div> 
<div class="absolute"> 
    <div id="relative"></div> 
</div> 

Cssは同じです。

Answer 6

これはいかがですか？

http://jsfiddle.net/P7c9q/4/

<div class="relative"> 
    <div class="yellow-div"></div> 
    <div class="yellow-div"></div> 
    <div class="absolute"></div> 
</div> 

.relative{ 
position:relative; 
} 

.absolute { 
position:absolute; 
width: 40px; 
height: 100px; 
background: #000; 
z-index: 1; 
top:30px; 
left:0px; 
} 
.yellow-div { 
position:relative; 
width: 200px; 
height: 50px; 
background: yellow; 
margin-bottom:4px; 
z-index:0; 
} 

ラッパーとして相対div要素を使用して、黄色のdivのは、通常のポジショニングを持ってみましょう。

ブラックブロックのみが絶対位置を持つ必要があります。

私はこのような画像の上にdiv要素を配置する方法をそれを把握するのに苦労しなかった

Answer 7

：

どんなに私は両方のdiv（画像ラッパー）と私はなっていたセクションでのzインデックスの構成方法この：

は私が基本的にそれはようなものだbackground: white;

するセクションの背景を設定していなかったが判明しますこの：

<div class="img-wrp"> 
    <img src="myimage.svg"/> 
</div> 
<section> 
<other content> 
</section> 

section{ 
    position: relative; 
    background: white; /* THIS IS THE IMPORTANT PART NOT TO FORGET */ 
} 
.img-wrp{ 
    position: absolute; 
    z-index: -1; /* also worked with 0 but just to be sure */ 
} 

Answer 8

私はこの問題に苦しんでいた、と私は（thisポストのおかげで）のことを学びました：

不透明度もZインデックス

div:first-child { 
 
    opacity: .99; 
 
} 
 

 
.red, .green, .blue { 
 
    position: absolute; 
 
    width: 100px; 
 
    color: white; 
 
    line-height: 100px; 
 
    text-align: center; 
 
} 
 

 
.red { 
 
    z-index: 1; 
 
    top: 20px; 
 
    left: 20px; 
 
    background: red; 
 
} 
 

 
.green { 
 
    top: 60px; 
 
    left: 60px; 
 
    background: green; 
 
} 
 

 
.blue { 
 
    top: 100px; 
 
    left: 100px; 
 
    background: blue; 
 
}

<div> 
 
    <span class="red">Red</span> 
 
</div> 
 
<div> 
 
    <span class="green">Green</span> 
 
</div> 
 
<div> 
 
    <span class="blue">Blue</span> 
 
</div>

に影響を与えることができ