Как работают CSS-позиции, почему абсолютные элементы складываются друг на друга, а не складываются один за другим

Как получить как #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 указано достаточно высоты, результат будет иметь ожидаемый вид. Но контент является динамически динамически, поэтому я заранее не знаю высоты: (

4b9b3361

Хорошо, у вас есть какие-то странные пожелания, поэтому позвольте мне объяснить вам, что эти позиции действительно означают в 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; parent, т.е. .container, и поскольку не назначено width это займет минимальное width, и, следовательно, ваши элементы перекрываются, если вы не можете изменить свой CSS (который, по моему мнению, не имеет смысла, почему вы не можете изменить), если хотите, вы можете сделать это,..

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


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


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

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

Демо


Приходится к 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;)


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

Демо 5

45
ответ дан 21 дек. '13 в 14:56
источник

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

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

См. JSFiddle

2
ответ дан 21 дек. '13 в 15:04
источник

когда используется 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>
1
ответ дан 21 дек. '13 в 14:56
источник