Comment fonctionnent les Positions CSS, pourquoi les éléments absolus s'empilent les uns sur les autres au lieu de s'empiler les uns après les autres
Comment faire pour que #row1
et #row2
dans le code suivant soient visibles, l'un après l'autre verticalement, comme s'il n'y avait pas de positionnement absolute/relative
impliqué?
<body>
<div class="container">
<div id="row1" class="row">
<div class="col1">Hello</div>
<div class="col2">World</div>
</div>
<div id="row2" class="row">
<div class="col1">Salut</div>
<div class="col2">le monde</div>
</div>
</div>
body {position:relative;}
.container {position:absolute;}
.row {position:relative;}
.col1, .col2 {position: absolute;}
mise à Jour
j'ai besoin des éléments pour avoir le positionnement fourni dans le CSS les règles, pour des raisons d'exclus ici. Donc, ma question Est de savoir s'il est possible d'atteindre ce que je cherche sans enlever les CSS ci-dessus? C'est-à-dire: ayant les deux .row
div
pour apparaître comme" normal " block
éléments.
Update 2
si une hauteur suffisante est spécifiée dans px
, le résultat a l'apparence attendue. Mais le contenu est programmitacally dynamique donc je ne sais pas la hauteur à l'avance :(
3 réponses
Eh bien, vous avez quelques souhaits bizarres ici alors laissez - moi vous expliquer ce que ces postes signifient vraiment dans CSS et comment ils fonctionnent, en utilisant position: relative;
est tout comme en utilisant static
position
, la différence fait un élément position: relative;
, vous pourrez utiliser top
, right
, bottom
et les propriétés left
, bien que l'élément se déplace, mais physiquement il sera dans le flux de document..
Venir position: absolute;
, quand vous faites tout élément position: absolute;
, il sort du flux de documents, par conséquent, il n'a rien à voir avec tout autre élément, donc dans votre exemple
vous avez .col1, .col2 {position: absolute;}
qui sont positionnés absolute
et puisque les deux sont hors du flux de document, ils se chevaucheront... Parce qu'ils sont déjà imbriqués sous position: absolute;
parent I. e .container
et comme aucun width
n'est assigné, il prendra le minimum width
et donc, vos éléments se chevauchent, si vous ne pouvez pas changer votre CSS (qui selon moi n'a pas de sens pourquoi vous ne pouvez pas changer) encore si vous voulez, que vous pouvez faire est ceci..
"Demo (sans enlever votre propriété position
) et c'est vraiment sale
pour les caractères s
, il sera au top
comme votre élément de conteneur est hors de la flux, et donc, pas de height
seront considérés dans le flux de documents, à moins que et jusqu'à ce que vous enveloppez que s
dans certains élément, et de le ramener avec, margin
padding
ou de Positionnement CSS.
postes CSS expliqués
comme je l'ai indiqué, voici quelques exemples de la façon dont le positionnement CSS fonctionne réellement, pour commencer, il y a 4 valeurs pour la propriété position
I. e static
qui est le par défaut un, relative
, absolute
et fixed
, donc à partir de static
, rien à apprendre beaucoup ici, les éléments empilent juste un au-dessous de l'autre à moins qu'ils ne soient flottés ou faits display: inline-block
. Avec le positionnement static
, top
, right
, bottom
et left
ne marchera pas.
Venir position: relative;
j'ai déjà expliqué en général, il est rien mais comme static
, il empile sur l'autre élément, il est dans le flux de document, mais vous pouvez modifier les éléments position
en utilisant top
, right
, bottom
et left
, physiquement, l'élément reste dans le flux, seulement position
de l'élément est changé.
vient maintenant absolute
qui généralement beaucoup ne comprend pas, en faisant un élément absolute
il sort du flux de document, et donc il reste indépendant, il n'a rien à voir avec d'autres éléments de positionnement à moins qu'il ne soit superposé par un autre position: absolute
élément qui peut être fixé en utilisant z-index
pour changer le niveau de la pile. La principale chose à retenir ici est d'avoir un position: relative;
conteneur de sorte que votre absolute
élément positionné est relative à cet élément positionné relative
, sinon votre élément s'envolera dans la nature.
Il est intéressant de noter que position: absolute;
élément lorsqu'il est placé absolute;
à l'intérieur d'un absolute
positionné élément parent, que c'est par rapport à cet élément et de non à le grand-parent de l'élément qui peut être positionné de relative
Démo 3 (Sans position: relative;
conteneur)
Démo 4 (Avec les position: relative;
conteneur)
dernier est position fixed
, c'est le même que absolute
mais il coule le long quand vous faites défiler, il est hors du flux de document, mais il défile, aussi, position: fixed;
élément ne peut pas être relative
à tout élément de conteneur ayant tout type de position
, pas même relative
, position
" fixed
élément est toujours relative
pour le viewport, de sorte que les concepteurs utilisent position: absolute;
quand ils veulent avoir un fixed
position
comportement mais relative
pour parent et de modifier la top
propriété onScroll
.
ce que vous voulez, n'est pas possible sans modifier la propriété CSS position
. Cependant, ce que vous pouvez faire sans toucher à la CSS existante, c'est la remplacer par un sélecteur plus spécifique
.row .col1, .row .col2 {
position: relative;
}
Voir JSFiddle
lorsque position:relative
est utilisé, la mise en page se produit normalement avant d'être compensé par top, left
valeurs, cependant position:absolue will ignorer le flux de document . Les relative
ne fonctionneront pas avec des changements, mais l'absolu doit être changé
.col1, .col2 {display:inline-block;}
modifier: selon votre circonstances, peut-être que vous pouvez envelopper votre table dans un div positionné absolu puis utiliser le flux de document normal dans la table?
<div class="absolute-wrap">
<div class="row">
<div class="col"> </div>
</div>
</div>