CSS: Comment positionner deux éléments l'un sur l'autre, sans spécifier de hauteur?

Question

J'ai deux DIVs que j'ai besoin de positionner exactement sur le dessus les uns des autres. Cependant, quand je fais ça, la mise en forme devient tout foiré parce que le DIV contenant les actes comme il n'y a pas de hauteur. Je pense que c'est le comportement attendu avec position:absolute mais j'ai besoin de trouver un moyen de la position de ces deux éléments l'un sur l'autre et ont le récipient d'étirement que le contenu s'étend:

Le coin supérieur gauche de l' .layer2 doit être exactement alignés vers le haut sur le bord gauche de l' layer1

<!-- HTML -->
<div class="container_row">
    <div class="layer1">
        Lorem ipsum...
    </div>
    <div class="layer2">
        More lorem ipsum...
    </div>
</div>
<div class="container_row">
    ...same HTML as above. This one should never overlap the .container_row above.
</div>

/* CSS */
.container_row {}

.layer1 {
    position:absolute;
    z-index: 1;
}

.layer2 {
    position:absolute;
    z-index: 2;
}

Answer 1

Tout d'abord, vous devriez vraiment être dont la position sur les éléments en position absolue ou vous rencontrerez étrange et déroutant comportement; vous voudrez probablement ajouter top: 0; left: 0 de la CSS pour vos deux éléments en position absolue. Vous aurez également besoin d'avoir position: relative sur .container_row si vous souhaitez que les éléments en position absolue pour être positionné à l'égard de leurs parents plutôt que le 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 "l'absolu", "relatif" ou "fixe" ...

Votre problème, c'est qu' position: absolute supprime les éléments de la circulation normale:

Il est retiré de la circulation normale entièrement (il n'a pas d'impact sur, plus tard, les frères et sœurs). Un positionnement absolu zone établit un nouveau bloc contenant pour le flux normal des enfants et absolument (mais pas fixe) positionné descendants. Cependant, le contenu d'un élément en position absolue de ne pas couler autour de toutes les autres cases.

Cela signifie que les éléments en position absolue ont aucun effet sur leur élément parent de la taille et de votre premier <div class="container_row"> auront une hauteur de zéro.

Si vous ne pouvez pas faire ce que vous essayez de faire avec les éléments en position absolue, sauf si vous savez de quelle taille ils vont être (ou, de manière équivalente, vous pouvez spécifier leur hauteur). Si vous pouvez spécifier les hauteurs, alors vous pouvez mettre la même hauteur sur l' .container_row et tout sera en ligne; vous pouvez également mettre un margin-top sur le deuxième .container_row pour laisser de la place pour les éléments en position absolue. Par exemple:

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

Answer 2

Super réponse, "mu est trop court". Je cherche exactement la même chose, et après lecture de votre post, j'ai trouvé une solution qui correspondait à mon problème.

J'ai eu deux éléments de même taille et je voulais les empiler. Alors qu'elles ont toutes la même taille, ce que je pouvais faire était de faire

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

uniquement sur le dernier élément. De cette façon, le premier élément est inséré correctement, "poussant" les parents de la hauteur, et le deuxième élément est mis sur le dessus.

Espérant que cela aide d'autres personnes qui essaient de l'empilement de 2+ éléments avec le même (inconnu) de hauteur.

Answer 3

En raison du positionnement absolu, la suppression des éléments de la position du flux de documents: l'absolu n'est pas l'outil approprié pour le travail. Selon la disposition 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: la traduction. Montrez-nous un échantillon de ce que vous voulez faire, nous pouvons mieux vous aider.

Answer 4

Bien sûr, le problème est tout au sujet d'obtenir la hauteur de votre dos. Mais comment pouvez-vous faire si vous ne connaissez pas la hauteur à l'avance? Eh bien, si vous savez ce ratio d'aspect que vous voulez donner le conteneur (et le garder réactive), vous pouvez obtenir la hauteur de votre retour par l'ajout de rembourrage pour un autre enfant du conteneur, exprimé en pourcentage.

Vous pouvez même ajouter un mannequin div pour le conteneur et mis quelque chose comme padding-top: 56.25% pour donner le mannequin élément d'une hauteur qui est une proportion du conteneur largeur. Cela va pousser le conteneur et lui donner un aspect ratio, dans ce cas, 16:9 (56.25%).

Rembourrage et de la marge d'utiliser le pourcentage de la largeur, c'est vraiment le truc ici.