web-dev-qa-db-fra.com

Pourquoi les éléments absolus s’empilent-ils les uns les autres au lieu de s’empiler les uns après les autres?

Comment obtenir les deux #row1 et #row2 dans le code suivant pour être visible, l'un après l'autre verticalement, comme s'il n'y en avait pas absolute/relative positionnement 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 les règles CSS, pour des raisons exclues ici. Donc, ma question est de savoir s'il est possible de réaliser ce que je recherche sans supprimer le CSS ci-dessus? C'est à dire. avoir les deux .rowdivà apparaître comme des éléments "normaux" block.

Mise à jour 2

Si une hauteur suffisante est spécifiée dans px, le résultat a l'apparence attendue. Mais le contenu est dynamique par programmation, donc je ne connais pas la hauteur à l'avance :(

htmlcsscss-position
26
Fellow Stranger

Eh bien, vous avez des souhaits étranges ici, alors laissez-moi vous expliquer ce que ces positions signifient vraiment en CSS et comment elles fonctionnent, en utilisant position: relative; c'est comme utiliser staticposition, la différence est de faire un élément position: relative;, vous pourrez utiliser les propriétés top, right, bottom et left, bien que l'élément se déplace, mais physiquement, il sera dans le flux de documents ..

enter image description here

Venir position: absolute;, lorsque vous créez un élément position: absolute;, il sort du flux de documents, donc il n'a rien à voir avec un 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 documents, ils se chevauchent ... Parce qu'ils sont déjà imbriqués sous position: absolute; parent, c'est-à-dire .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 (ce qui selon moi n'a aucun sens pourquoi vous ne pouvez pas changer) encore si vous voulez, ce que vous pouvez faire est ceci ..

Démo (Sans supprimer aucune de vos propriétés position) Et c'est vraiment sale

Pour les caractères s, il se trouvera au niveau de top car votre élément conteneur est hors du flux, et donc, aucun height ne sera pris en compte dans le flux de documents, sauf si et jusqu'à ce que vous enveloppiez ce s dans un élément et que vous le supprimiez avec, marginpadding ou le positionnement CSS.

Explication des positions CSS

Comme je l'ai commenté, voici quelques exemples du fonctionnement réel du positionnement CSS. Pour commencer, il existe 4 valeurs pour la propriété position, c'est-à-dire static qui est la valeur par défaut, relative , absolute et fixed, donc en commençant par static, rien à apprendre ici, les éléments s'empilent l'un au-dessous de l'autre à moins qu'ils ne flottent ou ne soient créés display: inline-block. Avec le positionnement de static, top, right, bottom et left ne fonctionnera pas.

Démo

Venir position: relative; Je vous ai déjà expliqué en général, ce n'est rien d'autre que static, il se cumule sur d'autres éléments, il est dans le flux de documents, mais vous pouvez Tweak les éléments position en utilisant top, right, bottom et left, physiquement, l'élément reste dans le flux, seul position de l'élément est modifié.

Démo 2

Vient maintenant absolute ce que beaucoup ne comprennent généralement pas, lorsque vous créez un élément absolute il sort du flux de documents, et donc il reste indépendant, il n'a rien à voir avec le positionnement des autres éléments à moins qu'il ne soit chevauchée par d'autres position: absolute élément qui peut être corrigé à l'aide de z-index pour modifier le niveau de la pile. La principale chose à retenir ici est d'avoir un position: relative; conteneur pour que votre élément positionné absolute soit relatif à cet élément positionné relative, sinon votre élément s'envolera dans la nature.

Il convient de noter que position: absolute; élément lorsqu'il est positionné absolute; à l'intérieur d'un élément parent positionné absolute, alors qu'il est relatif à cet élément et pas relatif à l'élément parent grand qui peut être positionné relative

Démo 3 (Sans position: relative; récipient)

Démo 4 (Avec position: relative; récipient)

Le dernier est position fixed, c'est la même chose que absolute mais ça coule quand vous faites défiler, c'est hors du flux de document, mais ça défile aussi, position: fixed; l'élément ne peut pas être relative vers un élément conteneur ayant n'importe quel type de position, pas même relative, positionfixed élément est toujours relative dans la fenêtre, donc les concepteurs utilisent position: absolute; quand ils veulent avoir un comportement fixedposition mais relative au parent et Tweak la propriété toponScroll.

Démo 5

57
Mr. Alien

Ce que vous voulez, n'est pas possible sans modifier la propriété CSS position. Cependant, ce que vous pouvez faire sans toucher au CSS existant, c'est le remplacer avec un sélecteur plus spécifique

.row .col1, .row .col2 {
    position: relative;
}

Voir JSFiddle

2
Olaf Dietsche

quand position:relative est utilisé, la mise en page se produira normalement avant d'être compensée par top, left valeurs, cependant position: absolue va ignorer le flux de documents . Les relative fonctionneront sans changement mais l'absolu doit être changé

.col1, .col2 {display:inline-block;}

http://jsfiddle.net/C4bQN/

EDIT: Selon votre situation, vous pouvez peut-être envelopper votre tableau dans un div absolu positionné puis utiliser le flux de documents normal dans le tableau?

<div class="absolute-wrap">
    <div class="row"> 
        <div class="col"> </div>
    </div>
</div>
1
roo2