Absolute positioning

Question

I have a colleague who uses a lot of absolute positioning in his CSS.

I find that usually I can achieve the same visual effects by creating a different structure for html - in fact, I tend to shy away from using absolute positioning, unless I absolutely need to.

The question is - my instincts sound here, besides the complexity of css - is it absolute positioning that can be used sparingly?

Answer 1

Excessive use of absolute positioning is a design issue, but it isn’t because of any performance issues - I don’t know anything about performance, which makes me hesitate to use absolute positioning when I need it.

The real problem with absolute positioning is that you tend to snap your layout to fixed sizes, which can cause things to go blank if you need to adapt to things that change size.

For example, what happens if you want to increase the font size of your site? If everything is absolutely positioned, you will make great efforts to reinstall everything.

In the same vein, absolute positioning almost always means that the entire layout is positioned and has a size in pixels, not em units or percent. Again, there is nothing wrong with using the pixel size, but it causes accessibility problems when people try to customize the site themselves (for example, with an increase or a magnifying glass, or just change the font size, etc.).

And have you tried viewing your site on different mobile devices? Websites that are tightly designed are usually the worst when it comes to viewing a smaller screen size. It's much better to have a fluid design that works only where you use it, rather than having a completely separate website for mobile phones.

Answer 2

For me, using absolute positioning in relatively positioned elements (e.g. in the footer) saves time. Using it everywhere can be messy when you need to change the layout (columns, headers ...).

Answer 3

If I can, I always try to avoid absolute positioning. Because it usually complicates me in the end. But sometimes I have no choice.

Answer 4

Many years after the question was asked, everything looks a little different. The touch screen, mobile devices and the evolution of scalability in regular desktop browsers eliminate all the negatives of the absolute layout. Simple scaling makes it unnecessary to avoid absolute positioning. Create your own screen as you wish. Fonts, images, absolute coordinates and sizes are easily scalable in almost any recent OS / browser.

Most operating systems have reasonable default values ​​for dpi (dots per inch), and browsers are configured with screen resolution in mind. Take any high resolution tablet. "font-size: 10px" in your CSS will actually cause the text to be many times "higher" when measured in real screen pixels.

As for performance, it is not like a static layout, it does not require the browser to calculate the size and position of the elements. The layout engine still needs to perform the calculations that follow the rules of static positioning and calibration. The absolute layout simply allows developers to explicitly specify these rules.

You can make the argument that absolute positioning may even require less work from the browser to the layout elements. For a static layout of 100 children, it is necessary to evaluate the position and size of 99 elements in order to position the 100th element. Absolute positioning clearly tells the browser where to put this 100th child.

I myself have not run any tests, but it is unlikely that there are significant performance differences between the different types of layouts.