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 the nearest ‘positioned’ parent element.

Note: A ‘positioned’ element can be any of the following: relative, fixed, absolute, or sticky.

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, childDIV 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.