Comment CSS Postes de travail, pourquoi absolue éléments s'empilent les uns sur les autres au lieu de les empiler les uns après les autres

Comment pouvez obtenir à la fois #row1 et #row2 dans le code suivant pour être visibles, l'une après l'autre à la verticale, comme si il n'y avait pas absolute/relative positionnement impliqués?

<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 d'éléments pour avoir le positionnement prévu dans les règles CSS, pour des raisons d'exclus ici. Donc ma question est de savoir si il est possible de réaliser ce que je suis à la recherche de sans enlever le dessus de CSS? I. e. ayant les deux .row divapparaissent comme "normal" block éléments.

Mise à jour 2

Si assez de hauteur est spécifiée dans px, le résultat inattendu look. Mais le contenu est programmitacally dynamique donc je ne sais pas la hauteur de l'avance 🙁

  • jsfiddle.net/wjrNQ/1
  • Bien - ne pas utiliser le positionnement absolu! Tant que col1/col2 ont des positions absolues, ils vont ignorer les modifications sur les lignes.
  • N'utilisez pas de positionnement à tous les jsfiddle.net/wjrNQ/2 bien que ne suis pas répondre comme je suis pas sûr de ce que vous demandez ici
  • Merci pour les commentaires, veuillez consulter la mise à jour de question.
InformationsquelleAutor Fellow Stranger | 2013-12-21
  1. 58

    Bien vous avez un peu bizarre souhaite ici, alors laissez-moi vous expliquer ce que ces positions vraiment moyen en CSS et comment ils fonctionnent, à l'aide de position: relative; est tout comme l'utilisation de static position, la différence est de faire un élément position: relative;, vous serez en mesure d'utiliser top, right, bottom et left propriétés, si l'élément se déplace, mais physiquement, il sera dans le flux de documents..

    Comment CSS Postes de travail, pourquoi absolue éléments s'empilent les uns sur les autres au lieu de les empiler les uns après les autres

    Venir à position: absolute;, quand vous faites tout élément position: absolute;, elle 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 en dehors de la circulation des documents, ils vont se chevaucher... Parce qu'ils sont déjà imbriqués sous position: absolute; parent, je.e .container et depuis pas de width est attribué, il va prendre le minimum de width et par conséquent, votre superposition d'éléments, si vous ne pouvez pas modifier votre CSS(qui selon moi n'a aucun sens pourquoi vous ne pouvez pas modifier) si vous voulez, que vous pouvez faire est-ce que..

    Démo (Sans supprimer l'un de vos position à la propriété) Et c'est vraiment sale

    Pour la s caractères, il sera à la top que votre conteneur de l'élément est hors de la circulation, et donc, pas de height seront considérés dans le flux de documents, à moins que et jusqu'à ce que vous enveloppez qui s dans certains élément, et de le ramener avec, margin padding ou de Positionnement CSS.

    CSS Positions Expliqué

    Comme je l'ai commenté, ici sont quelques exemples de la façon dont Positionnement CSS fonctionne réellement, pour commencer, il y a 4 valeurs position bien je.e static qui est celui par défaut, relative, absolute et fixed, donc en commençant avec static, rien à apprendre beaucoup de choses ici, des éléments juste stackup l'un en dessous de l'autre, sauf si elles sont flotté ou fait display: inline-block. Avec static positionnement, top, right, bottom et left ne fonctionne pas.

    Démo

    Venir à position: relative; je l'ai déjà expliqué en général, ce n'est rien, mais même comme static, il empile sur un autre élément, c'est dans le flux de documents, mais vous pouvez modifier les éléments position à l'aide de top, right, bottom et left, physiquement, l'élément reste dans le flux, seulement position de l'élément est modifié.

    Demo 2

    Vient maintenant absolute qui, généralement, beaucoup ne parvient pas à comprendre, quand on fait un élément absolute elle sort du flux de documents, et donc il reste indépendant, il n'a rien à voir avec les autres éléments de positionnement, sauf si elle est recouverte par d'autres position: absolute élément qui peut être fixé à l'aide de z-index pour modifier le niveau de la pile. La principale chose à retenir ici est d'avoir un position: relative; récipient de sorte que votre absolute positionné élément est relative pour que relative positionné élément, autre élément va s'envoler 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 pas par rapport à le grand-parent de l'élément qui peut être positionné relative

    Démo 3 (Sans position: relative; conteneur)

    Démo 4 (Avec position: relative; conteneur)

    Dernier est position fixed, ce sont les mêmes que absolute mais elle coule le long de lorsque vous faites défiler, il est hors de la circulation des documents, mais qu'il défile, également, position: fixed; élément ne peut pas être relative à tout élément de conteneur d'avoir tout type de position, pas même relative, position fixed élément est toujours relative à la fenêtre d'affichage, de sorte que les concepteurs utilisent position: absolute; quand ils veulent avoir une fixed position comportement, mais relative de parent et de modifier les top propriété onScroll.

    Démo 5

    • En utilisant position: absolute; et en laissant de top et left, vous pouvez également prendre l'élément de l'écoulement et de l'afficher à l'intérieur de la mère: jsfiddle.net/mD6n6/113
    • brillamment expliqué mate! bien fait.
    InformationsquelleAutor Mr. Alien
  2. 2

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

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

    Voir JSFiddle

    • sympa de penser à l'extérieur de la boîte au sujet de POURQUOI il dit qu'il est impossible de modifier le style
    InformationsquelleAutor Olaf Dietsche
  3. 1

    quand position:relative est utilisé, le mise en page se fera normalement avant d'être compensée par top, left valeurs, cependant position:absolute sera ignorer le flux de documents. Le relative ne fonctionne avec aucun des changements mais absolue doit être changé

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

    http://jsfiddle.net/C4bQN/

    EDIT: Selon votre situation, peut-être que vous pouvez envelopper votre table dans un absolu placé div ensuite l'utilisation normale de la circulation des documents au sein de la table?

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