Menu
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?
290
Absolute positioning defines the position of a given bounding box from the top and left side margins of the web page. This not only allows objects to be placed in an exact location, it also allows objects to be placed one on top of another.
When you need something to be positioned in an very specific spot you would use absolute positioning. For instance you may want to have an image with an overlapping caption that always sits at the top of the picture (say 20px from the top).
An element with position: absolute; is positioned relative to the nearest positioned ancestor (instead of positioned relative to the viewport, like fixed). However; if an absolute positioned element has no positioned ancestors, it uses the document body, and moves along with page scrolling.
In some cases, absolute positioning breaks faster and it's better to use floats, while in other situations it's better to use absolute positioning because floats would break the layout. luckily for us, there is one very simple rule: If elements should not interact, use absolute positioning, if they should, use floats.
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.
166
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...).
31
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
