When I started to learn how to develop web pages, CSS was in it’s beginnings. It was in state that CSS3 was two years ago where each browser interpreted it in it’s own way and half of the stuff didn’t work in one of available browsers. This meant that unless you had a huge desire to limit users to certain browsers, you ended up with a web page that looked something like this:

90swebpage

Anyway, as years progressed and we got better and better browsers and newer CSS standard, styling became easy to do. Suddenly you were not supposed to use tables for positioning or frames for layout any more and anyone still doing it was quickly out of business. Instead we started doing things with CSS.

Positioning in CSS is still a bit tricky and you have to learn about stuff like box model and why it didn’t work the same in all browsers. This is when two techniques developed. Either you positioned elements in-flow (from left to right and top to bottom) or you did it with absolute positioning.

Now, absolute positioning is not all that bad, provided it is used wisely. However, and this is my opinion, you should only absolutely position elements relatively on it’s container. Using absolute positioning to position everything breaks the flow of the document and can lead to lots more work once changes need to be applied to the layout.

I think user Bryan M. of StackOverflow sums it up nicely:

I think the problem is that absolute positioning is easy to abuse. A coordinate system is much easier for lay people to understand than the box model. Also, programs like Dreamweaver make it trivially simple to layout a page using absolute positioning (and people don’t realize what they’re doing).

However, for typical page layout, the default static positioning should be adequate and get the job done 90% of the time. It’s very flexible, and by keeping everything in normal flow, elements are aware of the other elements around them, and will act according when things change. This is really good when dealing with dynamic content (which most pages are these days).

Using absolute positioning is far more rigid and makes it difficult to write layouts that respond well to changing content. They’re simply too explicit. However, it is perfect if you’re in need of freely moving elements around a page (drag/drop), need to overlay elements on top of each other, or other layout techniques that would benefit from working on a coordinate system. Frankly, a chessboard sounds like a fine reason to use it.

So is absolute positioning evil? Yes, but not in every case. Positioning something absolute relatively to it’s container is fine, if there is absolutely no way to position element using regular in-flow positioning (close x icon for modal dialog pops to mind). However, if you are learning CSS, I would definitely advise you to learn the box model first.