Absolute positioning takes the element out of the normal document flow. Any absolutely positioned element is completely ignored when regarding normal elements.
This breaks in a lot of scenarios. The main one that springs to mind is putting elements underneath each other. With your column example, sure you can absolutely position 3 columns, but you can't put anything below that on the page, because the flow is still at the top of the page. The "absolute" elements do not affect where later content comes.
With floats, you just put an element afterwards and it wraps around or underneath the floating ones.
That's not to say it has no use. Positioning is very useful when you want to pop up a "layer" over the web page.
A short example... take this common HTML scenario:
<h2>Section title</h2>
<div class="column1">First</div>
<div class="column2">Second</div>
<div class="column3">Third</div>
<h2>Second section title</h2>
...
With floats, you'd use this CSS:
.column1, .column2, .column3 {
float: left;
width: 200px;
}
h2 {
clear: both;
}
And everything would be fine. Let's absolutely position the columns instead:
.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;
}
Try this for yourself (with more content in each column) and see what happens to the second heading - it will always be right under the first one, as if the columns aren't there. Actually, the second heading would be mostly hidden by the columns since they're layered over the top of the document.
Unless the columns are fixed height then it is impossible to know where to put that heading below the columns. It's even worse if you want more columns under each heading.
Honestly, just give it a try and attempt a nice layout using absolute positioning. You'll soon understand its failings.
与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
