Z-Index Stapelkontext

Question

Ich habe das Problem, dass Z-Index ist nicht so einfach wie es klingt.

Nachdem ich im Grunde alles gelesen hatte, was ich darüber fand, konnte ich immer noch keine Lösung finden. So, hier ist mein Problem:

JSFiddle

<div id="first"> 
<div id="middlelayer"> 
    2 
</div> 
</div> 
<div id="second"> 
    <div id="toplayer"> 
    1 
    </div> 
    <div id="lowestlayer"> 
    3 
    </div> 
</div> 

Ich möchte ein Div einer anderen Elternteil (#middlelayer) zwischen zwei anderen Divs (#toplayer und #lowestlayer) zu sitzen. Ich habe mit im Grunde jede Kombination von z-Indizes experimentend und auch versucht, die Abhilfe mit einer Undurchsichtigkeit: .99 hier beschrieben:

https://philipwalton.com/articles/what-no-one-told-you-about-z-index/

Nichts schien so weit zu arbeiten, ich hoffe, dass Sie mir helfen können.

Vielen Dank im Voraus!

Answer 1

.toplayer { 
 
    width: 120px; 
 
    background-color: green; 
 
    position: fixed; 
 
    z-index: 3; 
 
} 
 

 
#middlelayer { 
 
    width: 140px; 
 
    background-color: blue; 
 
    position: fixed; 
 
    z-index: 2; 
 
} 
 

 
#lowestlayer { 
 
    width: 160px; 
 
    background-color: yellow; 
 
    position: fixed; 
 
}

<div id="first" >  
 
     <div id="middlelayer"> 
 
      middle 
 
     </div> 
 
</div> 
 
<div id="second"> 
 
    <div id="second2"> 
 
       <div id="lowestlayer"> 
 
        low 
 
       </div>  
 
       <div class="toplayer"> 
 
        top     
 
       </div> 
 
    </div> 
 
</div>

Habe ich nur z-index:1 zu z-index:3 zu jedem der Elemente, und es scheint, um die gewünschte Wirkung zu erzeugen.

EDIT:

entfernt JSFiddle aus meiner Antwort und ersetzt es mit einem Code-Schnipsel.

Answer 2

Ich denke, das ist, was Sie brauchen. Bitte überprüfen Sie den folgenden Code.

#lowestlayer { 
 
    opacity: .99; 
 
} 
 

 
#lowestlayer, #middlelayer, #toplayer { 
 
    position: absolute; 
 
    width: 100px; 
 
    color: white; 
 
    line-height: 100px; 
 
    text-align: center; 
 
} 
 

 
#lowestlayer { 
 
    z-index: 1; 
 
    top: 20px; 
 
    left: 20px; 
 
    background: red; 
 
    width: 200px; 
 
    height: 200px; 
 
} 
 

 
#middlelayer { 
 
    top: 45px; 
 
    left: 45px; 
 
    background: green; 
 
    z-index: 2; 
 
    width: 150px; 
 
    height: 150px; 
 
} 
 

 
#toplayer { 
 
    top: 70px; 
 
    left: 70px; 
 
    background: blue; 
 
    z-index: 3; 
 
    width: 100px; 
 
    height: 100px; 
 
}

<div id="first"> 
 
<div id="middlelayer"> 
 
    2 
 
</div> 
 
</div> 
 
<div id="second"> 
 
    <div id="toplayer"> 
 
    1 
 
    </div> 
 
    <div id="lowestlayer"> 
 
    3 
 
    </div> 
 
</div>

Answer 3

Es scheint kein z-index Problem, sondern eine der Positionierung zu sein. Da Sie die Position fixed verwenden, denken Sie daran, dass die Elemente relativ zum Ansichtsfenster positioniert werden. Um das Ergebnis, das Sie wollen, auf top, eins auf bottom einzustellen, und für die letzte (die zentriert werden muss) verwenden Sie diesen kleinen Trick namens absolute centering.

Hier ist ein Beispiel, das Sie auf JSFiddle sehen ...

https://jsfiddle.net/kennethcss/smejLps4/

Update:

Wenn das gewünschte Ergebnis einfach ist die Elemente auf "Layer" müssen Sie nur anwenden z-index wie so ...

JSFiddle