Fügen Sie ein Element zwischen und seinem DOM-Kind und seinem DOM-Enkel in den Stapelkontext ein

Question

Wie kann ich ein Element zwischen seinem Kind und seinem Enkel einfügen? Ich habe eine Markup wie folgt aus:

<div id="main"> 
    <div id="img-container"> 
     <img id="img"> 
    </div> 
</div> 

und die Stile sind:

#main { 
    margin-top: 300px; 
    position: relative; 
    z-index: 1; 
} 
#img-container { 
    margin-top: -150px; 
    position: relative; 
    z-index: 0; 
} 
#img { 
    display: block; 
    position: relative; 
    z-index: 2; 
} 

Nun muss der Auftrag

sein

1. img-Container
2. Haupt
3. img

Wie es jetzt funktioniert:

Wie es funktioniert erwartet wird:

(Dank @ ralph.m für Bilder)

Answer 1

kann man wirklich nur erhalten, dass visuelle Effekt ohne Schichten neu zu ordnen, die usw. Sie können die Stile umkehren auf diese Elemente, um diese Erscheinung zu bekommen. Oder man könnte etwas noch einfacher wie folgt tun:

#main { 
 
    position: relative; 
 
    background: #e7e7e7; 
 
    width: 600px; 
 
    padding: 0 50px; 
 
    margin: 50px; 
 
} 
 

 
#main::after { 
 
    content: ''; 
 
    width: 500px; 
 
    height: 200px; 
 
    position: absolute; 
 
    z-index: -1; 
 
    left:50%; 
 
    margin-left: -250px; 
 
    top: -50px; 
 
    background: #30353b; 
 
} 
 

 
#img-container { 
 
    position: relative; 
 
    width: 400px; 
 
    top: -20px; 
 
    margin: 0 auto; 
 
}

<div id="main"> 
 
     <div id="img-container"> 
 
      <img src="https://unsplash.it/400/200"> 
 
     </div> 
 
    </div>

Answer 2

Frage ist nicht klar, aber sind Sie nur auf der Suche nach so etwas? (Es handelt sich im Grunde margin-top mit top auf dem img-Behälter ersetzt werden.)

#main { 
 
    margin-top: 100px; 
 
    position: relative; 
 
    z-index: 1; 
 
    background: #e7e7e7; 
 
    width: 500px; 
 
    padding: 0 40px; 
 
} 
 
#img-container { 
 
    top: -50px; 
 
    position: relative; 
 
    z-index: 0; 
 
    background: #30373b; 
 
    width: 400px; 
 
    padding: 40px; 
 
} 
 
#img { 
 
    display: block; 
 
    position: relative; 
 
    z-index: 2; 
 
}

<div id="main"> 
 
    <div id="img-container"> 
 
     <img id="img" src="https://unsplash.it/400/200"> 
 
    </div> 
 
</div>