Абсолютное позиционирование выводит элемент из нормального потока документов . Любой абсолютно позиционированный элемент полностью игнорируется применительно к нормальным элементам.
Это нарушает множество сценариев. Главное, что приходит на ум, - это положить элементы друг под другом. На примере столбцов вы можете абсолютно точно позиционировать 3 столбца, но вы не можете поместить что-либо ниже этого на страницу, потому что поток все еще находится в верхней части страницы. «Абсолютные» элементы не влияют на то, где появляется более поздний контент.
В случае с плавающей точкой вы просто помещаете элемент потом, и он оборачивается вокруг или под плавающими.
Это не значит, что это бесполезно. Позиционирование очень полезно, когда вы хотите открыть «слой» над веб-страницей.
Краткий пример ... возьмем этот общий сценарий HTML:
<h2>Section title</h2>
<div class="column1">First</div>
<div class="column2">Second</div>
<div class="column3">Third</div>
<h2>Second section title</h2>
...
С плавающей точкой, вы бы использовали этот CSS:
.column1, .column2, .column3 {
float: left;
width: 200px;
}
h2 {
clear: both;
}
И все будет хорошо. Давайте просто разместим столбцы вместо:
.column1, .column2, .column3 {
position: absolute;
width: 200px;
top: 30px; /* enough to miss the first h2 */
}
.column1 {
left: 0;
background: pink;
}
.column2 {
left: 200px;
background: lightgreen;
}
.column3 {
left: 400px;
background: lightblue;
}
Попробуйте сами (с большим содержанием в каждом столбце) и посмотрите, что происходит со вторым заголовком - он всегда будет прямо под первым, как если бы столбцов не было. На самом деле, второй заголовок будет в основном скрыт столбцами, поскольку они располагаются поверх документа.
Если столбцы не имеют фиксированной высоты, невозможно знать, куда поместить этот заголовок ниже столбцов. Еще хуже, если вам нужно больше столбцов под каждым заголовком.
Честно говоря, просто попробуйте и попробуйте хороший макет, используя абсолютное позиционирование. Вы скоро поймете его недостатки.