Absolute Positioning Performance

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

I find I can usually 开发者_高级运维achieve the same visual effects by providing a different structure to the html - in fact I tend to shy away from using absolute positioning except when I absolutely need to.

Question - are my instincts sound here, other than css complexity, is absolute positioning something to be used sparingly?

Excessive use of absolute positioning is a design problem, but it's not so much because of any a performance issues - I don't know of anything performance-wise which would make me hesitate to use absolute positioning when I needed it.

The real problem with absolute positioning everything is that you tend to tie your layout to fixed sizes, which can make things go completely nuts if you have to adjust for things which change size.

For example, what happens if you want to increase the font size of your site? If everything is absolutely positioned, you'll have a huge effort to re-align everything.

In the same vein, absolute positioning almost always means the entire layout is positioned and sized in pixels rather than em units or percent. Again, nothing wrong with using pixel sizing, but it does generate accessibility issues when people try to adjust the site themselves (eg with zoom or a magnifier, or just changing the font sizes, etc)

And have you tried viewing your site on various mobile devices? Sites that are rigidly designed are generally the worst when it comes to viewing on a smaller screen size. Far better to have a fluid design that just works wherever you use it, rather than having to have an entirely separate site for mobiles.

To me, using absolute positioning in relatively-positioned elements (like, within a footer) is time-saving. Using it everywhere could be messy when you have to change a layout (columns, headers...).

Many years after the question was asked things look a bit different. Touch screen, mobile devices and evolution of zooming capabilities in regular desktop browsers eliminates all negatives of the absolute layout. Easy zooming makes the effort of avoiding absolute positioning unnecessary. Design your screen as you please. Fonts, pictures, absolute coordinates and sizes scale easily in almost any recent OS/browser.

Most OSes have reasonable default dpi (dots per inch) setting and browsers are configured with screen resolution in mind. Take any high resolution tablet. "font-size: 10px" in your CSS will actually result in text many times "taller" when measured in real screen pixels.

As for performance its not like static layout doesn't require the browser to calculate sizes and position of elements. Layout engine still has to perform those calculations that follows static positioning and sizing rules. Absolute layout simply allows developers to specify those rules explicitly.

An argument can be made that absolute positioning may even require less work from the browser to layout elements. Having 100 children static layout needs to evaluate position and size of 99 elements in order to position the 100th element. Absolute positioning explicitly tells the browser where to put that 100th child.

I didn't run any benchmarks myself but it is highly unlikely there are any significant differences in performance between different types of layouts.

If I can, I also always try to avoid absolute positioning. As it tends to make things harder for me in the end. But sometimes I don't really have a choise.

Following these interesting performance tests https://www.artlebedev.com/tools/technogrette/html/browser-performance/

For interactive elements it’s better to use position: absolute.

But in opera it's "better" (little performance gain).