Почему абсолютные элементы складываются друг на друга, а не складываются один за другим?

Как получить как #row1, так и #row2 в следующем коде, чтобы быть видимым, один за другим по вертикали, как если бы не было позиционирования absolute/relative?

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

Обновление

Мне нужно, чтобы элементы располагались в правилах CSS, по причинам, исключенным здесь. Поэтому мой вопрос в том, можно ли добиться того, что я ищу, не удаляя вышеуказанный CSS? То есть имея два .row div, чтобы они отображались как "нормальные" block элементы.

Обновление 2

Если в px указано достаточно высоты, результат будет иметь ожидаемый вид. Но контент является динамически динамически, поэтому я заранее не знаю высоты: (

Ответы

Ответ 1

Итак, у вас есть некоторые странные пожелания, поэтому позвольте мне объяснить вам, что на самом деле означают эти позиции в CSS и как они работают. Использование position: relative; аналогично использованию static position, разница в создании элемента position: relative;, вы сможет использовать свойства top, right, bottom и left, хотя элемент будет перемещаться, но физически он будет находиться в потоке документов.

enter image description here

Что касается position: absolute;, когда вы создаете какой-либо элемент position: absolute;, он выходит из потока документов, следовательно, он не имеет никакого отношения к любому другому элементу, поэтому в вашем примере у вас есть .col1, .col2 {position: absolute;}, который позиционирован absolute, и, поскольку оба находятся вне потока документов, они будут перекрываться... Поскольку они уже вложены в родительский элемент position: absolute;, т.е. .container, и поскольку width не назначен, это займет минимальное значение width и, следовательно, ваши элементы будут перекрываться, если вы не сможете изменить свой CSS (что, по моему мнению, не имеет никакого смысла, почему вы не можете изменить), все же, если вы хотите, чем вы можете это сделать..

Демо (без удаления какого-либо из ваших свойств position) И это действительно грязно

Для символов s это будет в top, так как ваш контейнерный элемент находится вне потока, и, следовательно, height не будет рассматриваться в потоке документов, если и до тех пор, пока вы не закроете этот s в некоторый элемент, и опустите его с помощью margin padding или CSS Positioning.

Разъяснения позиций CSS

Как я уже прокомментировал, вот несколько примеров того, как на самом деле работает позиционирование CSS. Для начала есть 4 значения свойства position, то есть static, которое является значением по умолчанию, relative, absolute и fixed, поэтому, начиная с static, здесь нечему многому учиться, элементы просто складываются один под другим, если они не всплывают или не создаются display: inline-block. При позиционировании static top, right, bottom и left не будут работать.

Демо

Переходя к position: relative;, я уже объяснил вам, в целом, это не что иное, как static, оно накладывается на другой элемент, оно находится в потоке документов, но вы можете настроить элементы position, используя top, right, bottom и left, физически, элемент остается в потоке, изменяется только position элемента.

Демо 2

Теперь приходит absolute, который, как правило, многие не понимают, когда при создании элемента absolute он выходит из потока документов и, следовательно, остается независимым, он не имеет никакого отношения к позиционированию других элементов, если он не перекрывается другими position: absolute элемент, который можно исправить с помощью z-index для изменения уровня стека. Главное, что здесь необходимо запомнить, - это иметь контейнер position: relative;, чтобы ваш позиционированный элемент absolute относился к позиционированному элементу relative, иначе ваш элемент вылетит в дикую природу.

Стоит отметить, что элемент position: absolute; при позиционировании absolute; внутри позиционированного родительского элемента absolute, чем он относительно этого элемента, а не относительно великого родительского элемента, который может быть расположен relative

Демонстрация 3 (без контейнера position: relative;)

Демонстрация 4 (с контейнером position: relative;)

Последним является position fixed, это то же самое, что и absolute, но оно проходит при прокрутке, выходит из потока документов, но также прокручивается, элемент position: fixed; не может быть relative для любого элемента контейнера любого типа. из position, даже элемент relative, position fixed всегда является relative для области просмотра, поэтому дизайнеры используют position: absolute;, когда хотят иметь поведение fixed position, но relative родителю и настройте свойство top onScroll.

Демо 5

Ответ 2

Что вы хотите, невозможно без изменения свойства CSS position. Однако то, что вы можете сделать, не касаясь существующего CSS, переопределяет его более конкретным селектором

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

См. JSFiddle

Ответ 3

когда используется position:relative, макет страницы обычно будет, прежде чем будет смещен на top, left, но позиция: absolute будет игнорировать поток документов. relative будут работать без изменений, но абсолютное значение должно быть изменено

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

http://jsfiddle.net/C4bQN/

РЕДАКТИРОВАТЬ: В зависимости от ваших обстоятельств, возможно, вы можете обернуть таблицу в абсолютный позиционный div, а затем использовать обычный поток документов в таблице?

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