Faire déborder des éléments en dehors d’un parent en overflow hidden

Quel intégrateur HTML n’a pas un jour rencontré le cas de figure où il a besoin de faire déborder un élément par rapport à son parent et là, aïe… le parent en question est en overflow:hidden… Eh oui cette propriété fonctionne comme un masque qui cache tout ce qui dépasse (on s’en sert aussi beaucoup pour résoudre le fameux problème de float). Voie sans issue donc ? Non voilà une astuce 🙂 Prenons un exemple d’une div parente en overflow:hidden qui contient une div enfant en position:absolute; et on la décale de manière à essayer de la faire déborder.

L’HTML

<div class="parent">
  <div class="enfant"></div>
</div>

Le CSS

.parent {
  position: relative;
  overflow: hidden;
  margin: 0 auto;
  height: 100px;
  box-shadow: inset 0px 0px 12px #555;
  background-color: white;
}
.enfant {
  position: absolute;
  top: -10px;
  left: -5px;
  width: 30px;
  height: 30px;
  background-color: rgba(30,110,190,.8);
}

Le rendu

Bon donc oui on se rend bien compte que ça ne marche pas. Le petit carré bleu est mangé dans l’overflow hidden de son parent.

La solution

Le trick se situe dans le fait de NE PAS définir de propriété “position” (absolute / static / relative / fixed) sur la div qui possède l’overflow hidden (juste ne rien mettre) et là… magie le contenu en absolute apparaîtra en dehors de l’overflow.

L’HTML

<div class="fakeParent">
  <div class="parent">
    <div class="enfant"></div>
  </div>
</div>

Le CSS

.fakeParent {
  position: relative;
}
.parent {
  /* position: relative; */
  overflow: hidden;
  margin: 0 auto;
  height: 100px;
  box-shadow: inset 0px 0px 12px #555;
  background-color: white;
}
.enfant {
  position: absolute;
  top: -10px;
  left: -5px;
  width: 30px;
  height: 30px;
  background-color: rgba(30,110,190,.8);
}

Le rendu

Attention justement à cet absolute qui du coup va remonter le DOM jusqu’à trouver un parent pour le contenir (en l’occurrence un parent en relative OU en absolute). Donc il est judicieux d’encapsuler le tout dans une nouvelle div parente sur laquelle on met simplement le position:relative. Et voilà, le tour est joué !

Simple hein ? Evidemment on est pas obligé de CRÉER une nouvelle div spécialement pour ça. On pourrait utiliser une div parente déjà existante dans la page et qui pourrait faire l’affaire. Mais bon ce n’est pas toujours possible donc on rajoute juste un parent supplémentaire (l’exemple de notre fakeParent) ce qui aura finalement peu d’impacte en terme de performance sur notre application / site web.

Ressources

Article de Thierry Koblentz en anglais énumérant les différentes manières de « clearer les float » et démontrant l’utilisation de la technique évoquée dans ci-dessus :
• L’article lui même
• Page de démo