CSS: positionne l'élément imbriqué légèrement en dehors des limites de l'élément parent

Question

J'ai 2 divs, l'un imbriqué à l'intérieur de l'autre. Selon la conception de la page, le div imbriqué doit apparaître comme étant "au-dessus" du div parent, comme dans:

J'ai le code CSS codé pour les deux éléments, en utilisant une marge supérieure négative sur le div imbriqué pour tenter de simuler l'effet souhaité. Cependant, au lieu d'apparaître en dehors des limites du parent, les 10 premiers pixels du div imbriqué sont coupés, comme dans:

Je ne veux pas positionner l'élément de manière absolue, car l'objectif de cette page est qu'elle soit réactive.

HTML pour divs:

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

CSS pour les 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

Vous n'avez pas besoin d'appliquer position:absolute au div imbriqué.

Et margin ne serait probablement pas la meilleure pratique dans ce cas.

Ajoutez simplement position:relative au div imbriqué et définissez son top sur le nombre souhaité. Dans votre cas, ce serait probablement négatif.

Découvrez ce violon.

Answer 2

overflow: hidden sur le parent l'aurait fait parfaitement!