CSS: Comment positionner deux éléments les uns sur les autres, sans spécifier de hauteur?

J’ai deux DIV que je dois positionner exactement les unes sur les autres. Cependant, quand je le fais, le formatage est tout foutu parce que la DIV contenant agit comme s’il n’y avait pas de hauteur. Je pense que c’est le comportement attendu avec la position:absolute mais je dois trouver un moyen de positionner ces deux éléments les uns sur les autres et étirer le conteneur à mesure que le contenu s’étire:

Le bord supérieur gauche de .layer2 doit être exactement aligné sur le bord supérieur gauche de layer1

  
Lorem ipsum...
More lorem ipsum...
...same HTML as above. This one should never overlap the .container_row above.
/* CSS */ .container_row {} .layer1 { position:absolute; z-index: 1; } .layer2 { position:absolute; z-index: 2; }

Tout d’abord, vous devriez vraiment inclure la position sur les éléments positionnés de manière absolue ou vous rencontrerez un comportement étrange et déroutant; vous voulez probablement append top: 0; left: 0 top: 0; left: 0 à la CSS pour vos deux éléments absolument positionnés. Vous voudrez également avoir la position: relative par position: relative à .container_row si vous voulez que les éléments positionnés de manière absolue soient positionnés par rapport à leur parent plutôt qu’au corps du document :

Si l’élément a «position: absolute», le bloc contenant est établi par l’ancêtre le plus proche avec une «position» de «absolu», «relatif» ou «fixe» …

Votre problème est cette position: absolute supprime les éléments du stream normal :

Il est entièrement retiré du stream normal (il n’a aucun impact sur les frères et soeurs ultérieurs). Une boîte positionnée de manière absolue établit un nouveau bloc contenant pour les enfants à stream normal et les descendants positionnés de manière absolue (mais non fixe). Cependant, le contenu d’un élément positionné de manière absolue ne circule pas autour des autres cases.

Cela signifie que les éléments positionnés de manière absolue n’ont aucun effet sur la taille de leur élément parent et que votre premier

aura une hauteur de zéro.

Donc, vous ne pouvez pas faire ce que vous essayez de faire avec des éléments positionnés de manière absolue, à moins de savoir quelle sera leur taille (ou, de manière équivalente, vous pouvez spécifier leur hauteur). Si vous pouvez spécifier les hauteurs, vous pouvez mettre les mêmes hauteurs sur le .container_row et tout sera aligné. Vous pouvez également placer une margin-top sur le second .container_row pour laisser de la place aux éléments positionnés de manière absolue. Par exemple:

http://jsfiddle.net/ambiguous/zVBDc/

Bonne réponse, “mu est trop court”. Je cherchais exactement la même chose et après avoir lu votre article, j’ai trouvé une solution adaptée à mon problème.

J’avais deux éléments de la même taille et je voulais les emstackr. Comme chacun a la même taille, ce que je pouvais faire était de faire

 position: absolute; top: 0px; left: 0px; 

sur le dernier élément seulement. De cette façon, le premier élément est inséré correctement, “poussant” la hauteur des parents et le second élément est placé en haut.

Espère que cela aide d’autres personnes essayant d’emstackr 2 éléments avec la même hauteur (inconnue).

Je devais mettre

Container_height = Element1_height = Element2_height

 .Container { position: relative; } .ElementOne, .Container ,.ElementTwo{ width: 283px; height: 71px; } .ElementOne { position:absolute; } .ElementTwo{ position:absolute; } 

Utilisez peut utiliser z-index pour définir celui qui doit être en haut.

En raison du positionnement absolu qui supprime les éléments de la position du stream de documents: absolu n’est pas le bon outil pour le travail. Selon la mise en page exacte que vous souhaitez créer, vous réussirez en utilisant des marges négatives, la position: relative ou peut-être même la transformation: traduire. Montrez-nous un exemple de ce que vous voulez faire, nous pouvons mieux vous aider.

Bien sûr, le problème est de récupérer votre taille. Mais comment pouvez-vous faire cela si vous ne connaissez pas la hauteur à l’avance? Eh bien, si vous connaissez le rapport hauteur / largeur que vous souhaitez donner au conteneur (et le restz réactif), vous pouvez récupérer votre hauteur en ajoutant un remplissage à un autre enfant du conteneur, exprimé en pourcentage.

Vous pouvez même append une variable factice au conteneur et définir un élément comme un padding-top: 56.25% pour donner à l’élément factice une hauteur correspondant à la largeur du conteneur. Cela va pousser le conteneur et lui donner un rapport d’aspect, dans ce cas 16: 9 (56,25%).

Rembourrage et marge utilisent le pourcentage de la largeur, c’est vraiment le truc ici.

En fait, cela est possible sans position absolute et en spécifiant n’importe quelle hauteur. Tout ce que vous devez faire, c’est utiliser display: grid sur l’élément parent et mettre les descendants dans la même ligne et la même colonne.

S’il vous plaît vérifier l’exemple ci-dessous, basé sur votre HTML. J’ai ajouté seulement et des couleurs, donc vous pouvez voir le résultat.

Vous pouvez également modifier facilement z-index chacun des éléments descendants pour manipuler sa visibilité.

 .container_row{ display: grid; } .layer1, .layer2{ grid-column: 1; grid-row: 1; } .layer1 span{ color: #fff; background: #000cf6; } .layer2{ background: rgba(255, 0, 0, 0.4); } 
 
Lorem ipsum...
More lorem ipsum...
...same HTML as above. This one should never overlap the .container_row above.

Après de nombreux tests, j’ai vérifié que la question initiale était déjà correcte. manque juste quelques parameters:

  • le container_row DOIT avoir la position: relative;
  • les enfants (…), DOIVENT avoir la position: absolute; left:0; position: absolute; left:0;
  • pour que les enfants (…) s’alignent exactement l’un sur l’autre, le container_row doit avoir un style supplémentaire:
    • height:x; line-height:x; vertical-align:middle;
    • text-align:center; pourrait aussi aider.