CSS: Position verschachteltes Element leicht außerhalb der Grenzen des übergeordneten Elements

Question

Ich habe 2 divs, eine verschachtelte innerhalb der anderen. Entsprechend dem Seitendesign muss das verschachtelte Div "wie oben" in this image erscheinen.

Ich habe den CSS-Code für beide Elemente mit einem negativen oberen Rand auf dem geschachtelten Div, um zu versuchen, den gewünschten Effekt zu simulieren. Anstatt jedoch außerhalb der Grenzen des übergeordneten Elements zu erscheinen, werden die oberen 10px des verschachtelten Divs abgeschnitten, wie in this image.

Ich möchte das Element nicht absolut positionieren, weil ein Ziel für diese Seite ist, dass es anspricht.

HTML für divs:

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

CSS für die divs:

.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

Sie brauchen nicht position:absolute die verschachtelten div anzuwenden.

Und margin wäre wahrscheinlich nicht die beste Praxis in diesem Fall.

Fügen Sie einfach position:relative zum verschachtelten div hinzu, und stellen Sie es auf eine beliebige Zahl top. In Ihrem Fall wäre es wahrscheinlich negativ.

prüfen this Fiddle.

Answer 2

overflow: hidden auf der übergeordneten es perfekt gemacht hätte aus!