Is it considered bad practice to use absolute positioning?

Question

I was developing a web page, where I was laying out a board for a Chess-like game, along with a couple of piece trays. It's all done using HTML (with jQuery for dynamic updating as the game is played). Somewhere I'd got the notion that using absolute positioning of elements within a page was considered a bad practice, and that it was preferable to use relative positioning.

After struggling with relative positioning for too long, I realized that absolute positioning of the board elements would be much, much easier to get right... and it was.

Is anyone aware of a reason that relative positioning is preferable over absolute? Are there any guidelines or rules of thumb that you apply when deciding which approach to take?

Answer 1

For a chess like game such as you are developing, there is nothing inherently wrong with using absolute positioning. as you said, relative positioning and normal flow layout make this sort of task quite difficult.

Of course, if you were developing a more standard website, such as a site providing some public service, absolute positioning overrides the default flow layout of browsers and so will reduce accessibility for many users. In this case I would avoid it.

Having said that, a lesser known benefit of absolute positioning is that it allows localized absolute positioning within a (relatively positioned) parent element. To explain:

<div id="parentDIV" style="position:relative">
    <div id="childDIV" style="position:absolute:left:20px;top:20px;"
          I'm absolutely positioned within parentDIV.
    </div>
</div>

Here, divChild is actually positioned 20px from the left and 20px from the top of parentDIV, NOT the overall document. This gives a nice precise control over nested elements on a page, without sacrificing the overall page flow-layout.

So to answer your question (relative positioning being preferred over absolute): I don't believe there is a correct answer, it depends on what you are needing to build. However in general positioning (absolute or relative) versus default flow layout, my approach is as described above.

Answer 2

Relative positioning is nice if you can pull a totally fluid layout because it will look reasonable on a large range of screen resolutions.

That being said, it's quite often to find (especially when trying for cross-browser compatability with older versions), that totally fluid layouts are hard to get right. Falling back on absolute positioning shouldn't be frowned upon, most mortal web developers do it all the time.

Answer 3

Look at your website in different browsers under the following conditions:

• Switch your OS settings to high-dpi/large fonts/high contrast (all change the size of the default browser font)
• Increase/decrease the default font size in the browser
• Override the page fonts in the browser (usually somewhere in the Accessibility options)
• Override/turn off the page stylesheet (granted, users shouldn't expect a chess game to work properly in this scenario :-))

In general absolute position is bad when you have inline elements with non-fixed size fonts. For your scenario it might work; however, there will be a lot of edge cases where something funky will go on.

Answer 4

IMO, not a bad thing at all. I have recently completed an assignment with AA standards compliance and support for FF2, IE7, IE6 (yes, a pain I know). There were certain layouts which were only achievable because of absolutely positioning! Even certain components like buttons where layering was needed (transparencies) were possible only because of absolute positioning. If someone has a better way, please refer me to that.

Absolute positioning breaks the flow, if we know how to restrict the flow (change parent's coords to relative/absolute) it is fun. I don't know about older browsers (IE6 itself is a dinosaur) but one painful thing I found was, writing to PDF (Cute PDF) or opening with WINWORD (sue me) gives a shabby result.

Answer 5

As long as you structure your HTML so that the elements follow a logical order that makes sense when rendered without CSS, there is no reason why using absolute positioning should be considered bad practice.

Answer 6

There are no hard and fast rules. The different forms of positioning are all good at different things.

The majority of work is usually best done with static positioning (it is the least fragile option), but absolute positioning is very good on occasion. Relative positioning, on the other hand, is something I've never used except for animation (on elements which are statically positioned until JavaScript gets involved), establishing a containing block for absolute positioning (so the element itself isn't moved at all), and (very very rarely) a one or two pixel nudge of an element.

Answer 7

Some things are impossible to do without position:absolute. Other things are WAY easier to achive with absolute positioning (let say that you want a bottom-right button for "read more" in a fixed/min height box and you don't have enough text in that box). So, my advice: just use the one that fits your needs...

Answer 8

It does not answer your question, but...

For a chess like game board I think you can also use a table.
After all, it is is columns and rows you are displaying.

Now I know that many people start shouting 'don't use tables' and 'tables are evil'. Tables are however still a valid tool for showing some types of data, especially columns / rows organised data.

Answer 9

Keep in mind also that absolute positioning is not only used for positioning things relative to the browser window - it's also used for positioning things accurately within a containing element. When I finally understood this - after years of using CSS - it really revolutionized my ability to use CSS effectively.

The key is that an absolutely positioned element is positioned in the context of the first ancestor element that has position:relative or position:absolute. So if you have this:

div.Container
{
   position:relative
   width:300px;
   height:300px;
   background:yellow;
}

div.PositionMe
{
   position:absolute;
   top:10px;
   right:10px;
   width:20px;
   height:20px;
   background:red
}

and

<div class=Container>
...
   <div class=PositionMe>
   ...
   </div>
...
</div>

...the div PositionMe will be placed relative to Container, not to the page.

This opens up all sorts of possibility for precise placement in particular situations, without sacrificing the overall flexibility and flow of the page.

Answer 10

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.

Answer 11

Absolute positioning is a tool, and like any tool, it can be use in good and bad ways. There is nothing wrong with it : stackoverflow probably use it to display its alerts in the orange bar at the top of the site.

Now, in your situation, this is not bad either. But I think it would be much easier for you not to use it.

A chess board is a table, table cells don't need position tweaks. For events, onblur / onfocus and cie will do the job. Why would you even need pixels calculation ?

So don't be stressed by the quality of your practice, but maybe you could check if you really need absolute positioning.