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

Ich habe 2 divs, der eine verschachtelte innere des anderen. Laut der Seite design, die verschachtelte div angezeigt werden muss "on top" des parent-div, wie in dieses Bild.

Ich habe die CSS codiert für die beiden Elemente, mit einem negativen oberen Rand auf die verschachtelten div-Versuch zur Simulation der gewünschte Effekt. Jedoch, anstelle der Anzeige außerhalb des elterlichen Grenzen, die verschachtelten div ' s top-10px oder so werden immer abgeschnitten, wie in dieses Bild.

Ich nicht wollen, positionieren Sie das element absolut, denn ein Ziel dieser Seite ist, dass es reagieren.

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

InformationsquelleAutor der Frage Kevin Whitaker | 2013-01-18