CSS: posiziona un elemento annidato leggermente al di fuori dei limiti dell'elemento genitore

Question

Ho 2 div, uno annidato all'interno dell'altro. Secondo il design della pagina, il div nidificato deve apparire "sopra" il div genitore, come in.

Ho il codice CSS per entrambi gli elementi, utilizzando un margine superiore negativo sul div nidificato per tentare di simulare l'effetto desiderato. Tuttavia, invece di apparire al di fuori dei limiti del genitore, i primi 10px del div annidato vengono tagliati, come in this image.

Non voglio posizionare l'elemento assolutamente, perché un obiettivo per questa pagina è che sia reattivo.

HTML per div:

<div class="container-div"> 
    <div class="child-div"> 
    ... 
    </div> 
</div> 

CSS per i div:

.container-div { 
    padding: 10px 10px 0; 
} 

.child-div { 
    display: inline-block; 
    width: 100px; 
    height: 60px; 
    margin: -15px 10px 0; 
    border: 1px solid #efefef; 
    background-color: #fff; 
} 

Answer 1

Non è necessario applicare position:absolute al nidificato div.

E margin probabilmente non sarebbe la migliore pratica in questo caso.

Basta aggiungere position:relative al nidificato div e impostarlo su qualsiasi numero desiderato, top. Nel tuo caso, probabilmente sarebbe negativo.

Partenza this Fiddle.

Answer 2

overflow: hidden sul genitore avrebbe fatto perfettamente!