Absolute/Relative & Height 0

Bonjour,
je voudrais positionner un élément (une image) en absolute par rapport à son container (une div) parent relatif.
évidemment l'élément absolute sort du flux et la height du container parent passe donc à 0.
Je ne veux pas assigner de height en pixel au parent (pour des raison responsive) et voudrais que ce dernier garde la height de son enfant.

J'arrive à le faire avec du JS mais je voudrais n'utiliser que du css.

Merci d'avance.
Modifié par YouStone (26 Jan 2019 - 20:51)

Bonjour,

On ne peut pas dans le cas général.

Amicalement,

Tu es vraiment sûr ?
J'arrive à faire ça en bidouillant un peux...

https://codepen.io/yous61452/pen/xMVKoe

mais la valeur du padding-bottom du container parent est approximative..
Modifié par YouStone (26 Jan 2019 - 21:28)

Bonjour,

Dans le cas général, on ne peut pas. Mais dans les cas particuliers, on peut faire semblant.

Par exemple, si l'unique soucis est d'être responsive, tu peux par exemple utiliser les unités vh et vw.

Si tu donnes à ton image la même hauteur que son container en unité vw (largeur du viewport) ou vh (hauteur du viewport), tu n'auras pas de pixel et un container de même hauteur que ton image.

Exemple (même si je ne vois pas top l'intérêt du position: absolute ici, il faudrait connaitre tes autres contraintes):

#cont_dog{
  position: relative;
  background: yellow;
  height: 10vw;
}

.dog{
  position:absolute;
  height:10vw;
  left:50%;
  top:0%;
  transform:translateX(-50%);
}

Amicalement,

Ok merci pour ta réponse; avec le positionnement absolute c'est trop galère, je vais voir en css grid pour l'overlapping ça m'a l'air moins contraignant.