DOM çocuğu ile DOM alt yapısı arasında bir öğeyi istifleme bağlamına yerleştirin

Question

Çocuğun ve torununun arasına nasıl bir eleman yerleştirebilirim? Böyle bir biçimlendirme var:

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

Ve stilleri şunlardır:

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

Şimdi sırası olmalıdır

1. img-konteyner
2. ana
3. img

İşe beklenen nasıl

: şimdi nasıl çalışır

,

(teşekkürler @ ralph.m için görüntüler için)

Answer 1

Gerçekten sadece sen stilleri tersine çevirebilir vb katmanları yeniden sıralamak zorunda kalmadan bunu görsel efekti elde edebilirsiniz Bu görünümü almak için bu elemanlar üzerinde.

#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

Soru net değil ama sen sadece böyle bir şey mi arıyorsun? (Temelde img-kap üzerinde top ile margin-top değiştirmeniz yeterlidir.)

#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>