J'ai deux DIV que je dois positionner exactement l'un sur l'autre. Cependant, quand je fais cela, le formatage est complètement foiré parce que le DIV contenant agit comme s'il n'y avait pas de hauteur. Je pense que c'est le comportement attendu avec, position:absolute
mais je dois trouver un moyen de positionner ces deux éléments l'un sur l'autre et d'étirer le conteneur au fur et à mesure que le contenu s'étire:
Le bord supérieur gauche de .layer2
doit être exactement aligné sur le bord supérieur gauche delayer1
<!-- 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;
}
position: absolute
n'est pas tout à fait le bon style à utiliser alors.position:absolute
ça ne va pas. Quel serait le bon style?.layer1
et.layer2
ont-ils une taille connue?Réponses:
Tout d'abord, vous devriez vraiment inclure la position sur des éléments absolument positionnés ou vous rencontrerez un comportement étrange et déroutant; vous souhaitez probablement ajouter
top: 0; left: 0
au CSS pour vos deux éléments absolument positionnés. Vous voudrez également avoirposition: relative
sur.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 :Votre problème est que
position: absolute
supprime des éléments du flux normal :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 votre premier
<div class="container_row">
aura une hauteur de zéro.Vous ne pouvez donc pas faire ce que vous essayez de faire avec des éléments positionnés de manière absolue à moins de savoir quelle sera leur hauteur (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 s'alignera; vous pouvez également mettre unmargin-top
sur le second.container_row
pour laisser de la place aux éléments absolument positionnés. Par exemple:la source
position: absolute
besoin. Veuillez vérifier: stackoverflow.com/a/51949049/1736186En fait, cela est possible sans position
absolute
et en spécifiant n'importe quelle hauteur. Tout ce que vous devez faire est de l'utiliserdisplay: grid
sur l'élément parent et de placer les descendants dans la même ligne et la même colonne.Veuillez vérifier l'exemple ci-dessous, basé sur votre HTML. J'ai ajouté seulement
<span>
et quelques couleurs, donc vous pouvez voir le résultat.Vous pouvez également changer facilement
z-index
chacun des éléments descendants, pour manipuler sa visibilité (lequel devrait être en haut).la source
display: grid
n'existait pas il y a sept ans :)flex
, ce qui a un meilleur support de navigateur de nos jours.Excellente réponse, "mu est trop court". Je cherchais exactement la même chose, et après avoir lu votre message, j'ai trouvé une solution qui correspondait à mon problème.
J'avais deux éléments exactement de la même taille et je voulais les empiler. Comme chacun a la même taille, ce que je pourrais faire était de faire
sur seulement le dernier élément. De cette façon, le premier élément est inséré correctement, "poussant" la hauteur des parents, et le deuxième élément est placé sur le dessus.
J'espère que cela aidera d'autres personnes qui essaient d'empiler plus de 2 éléments avec la même hauteur (inconnue).
la source
position: aboslute
l' autre .Voici une autre solution utilisant display: flex au lieu de position: absolute ou display: grid.
la source
Je devais régler
Container_height = Element1_height = Élément2_height
Utilisez peut utiliser z-index pour définir lequel être en haut.
la source
Voici quelques css réutilisables qui conserveront la hauteur de chaque élément sans utiliser
position: absolute
:Le premier élément de votre
stack
est l'arrière-plan et le second est le premier plan.la source
En raison du positionnement absolu, supprimant les éléments de la position du flux de documents: absolu n'est pas le bon outil pour le travail. En fonction de la mise en page exacte que vous souhaitez créer, vous réussirez en utilisant des marges négatives, position: relative ou peut-être même transformer: translate. Montrez-nous un échantillon de ce que vous voulez faire, nous pouvons mieux vous aider.
la source
Bien sûr, le problème est de retrouver votre taille. Mais comment pouvez-vous faire cela si vous ne connaissez pas la hauteur à l'avance? Eh bien, si vous savez quel rapport hauteur / largeur vous souhaitez donner au conteneur (et le garder réactif), vous pouvez récupérer votre hauteur en ajoutant un rembourrage à un autre enfant du conteneur, exprimé en pourcentage.
Vous pouvez même ajouter un mannequin
div
au conteneur et définir quelque chose commepadding-top: 56.25%
donner à l'élément factice une hauteur proportionnelle à la largeur du conteneur. Cela poussera le conteneur et lui donnera un rapport hauteur / largeur, dans ce cas 16: 9 (56,25%).Le remplissage et la marge utilisent le pourcentage de la largeur, c'est vraiment le truc ici.
la source
Après de nombreux tests, j'ai vérifié que la question initiale était déjà correcte; il manque juste quelques paramètres:
container_row
DOIT avoirposition: relative;
position: absolute; left:0;
container_row
devrait avoir un style supplémentaire:height:x; line-height:x; vertical-align:middle;
text-align:center;
pourrait, aussi, aider.la source