CSS: pozycja zagnieżdżonego elementu nieco poza granicami elementu rodzica

Question

Mam 2 elementy div, jeden zagnieżdżony w drugim. Zgodnie z projektem strony zagnieżdżony element div musi wyglądać na "nadrzędny" div jednostki nadrzędnej, jak w this image.

Mam kod CSS dla obu elementów, używając ujemnego marginesu górnego na zagnieżdżonym div, aby spróbować zasymulować pożądany efekt. Jednak zamiast pojawiać się poza granicami rodzica, top 10 zagnieżdżonych div zostaje odcięty, tak jak w this image.

Nie chcę pozycjonować elementu absolutnie, ponieważ celem tej strony jest jej responsywność.

HTML div:

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

CSS 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

Nie trzeba stosować position:absolute do zagnieżdżonego div.

I margin prawdopodobnie nie byłoby najlepszą praktyką w tym przypadku.

Wystarczy dodać position:relative do zagnieżdżonego div i ustawić jego numer top na dowolny numer. W twoim przypadku byłaby to prawdopodobnie wartość ujemna.

Wyjazd this Fiddle.

Answer 2

overflow: hidden na rodzic zrobiłby to doskonale!