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;}

http://jsfiddle.net/wjrNQ/

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 :(

24
demandé sur Mr. Alien 2013-12-21 15:38:35

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..

enter image description here

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.

Démo


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é.

Démo 2


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 .

Démo 5

52
répondu Mr. Alien 2018-03-22 06:42:21

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

2
répondu Olaf Dietsche 2013-12-21 12:04:45

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;}

http://jsfiddle.net/C4bQN /

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>
1
répondu roo2 2017-05-23 12:02:24