CSS-Z-Index funktioniert nicht (Position absolut)

Dies ist auf den Stacking Context zurückzuführen. Wenn Sie einen Z-Index setzen, gilt dies auch für alle untergeordneten Elemente.

Sie könnten die beiden <div>s-Geschwister anstelle von Nachkommen machen.

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

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

Ich hatte mit diesem Problem zu kämpfen und ich lernte (dank dieses post), dass:

deckkraft kann auch den z-index beeinflussen

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>

Ich hatte Mühe, es herauszufinden, wie man ein Div wie folgt einem Div gegenüberstellt:  

Unabhängig davon, wie ich Z-Index in beiden Divs (dem Image-Wrapper) und dem Abschnitt konfiguriert habe, in dem ich Folgendes erhalten habe:

Es stellte sich heraus, dass ich den Hintergrund des Abschnitts nicht als background: white; eingerichtet hatte.

im Grunde ist es so:

<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 */
}

Fügen Sie einfach das zweite .absolute div vor dem anderen .sekunden div hinzu:

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

Weil die beiden Elemente einen Index 0 haben.

Wie wäre es damit?

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;
}

verwenden Sie das relative div als Wrapper und lassen Sie die gelben divs normal positionieren.

Nur der schwarze Block muss dann eine absolute Position haben.

Ich habe mein z-index-Problem gelöst, indem ich den Bodywrapper z-index:-1 und den Body z-index:-2 und die anderen divs z-index:1 erstellt habe. 

Und dann funktionierten die späteren Divs erst, wenn ich z-index 200+ hatte. Obwohl ich position:relative für jedes Element hatte, würde der Body bei default z-index nicht funktionieren. 

Hoffe das hilft jemandem. 

versuchen Sie diesen Code:

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

}

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

JSFiddle

Sie müssen das zweite div auf das erste setzen, da beide einen Z-Index von Null haben, damit die Reihenfolge im Dom entscheiden kann, welche davon oben ist. Dies wirkt sich auch auf das relativ positionierte div aus, da sich sein Z-Index auf Elemente im übergeordneten div bezieht.

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

Css bleibt gleich.