Hi, what is the best use for using the position property? I have seen
several developers use a lot to position their content a lot. Is their
best uses for it? what not to use it for?
Hi, Carlos.
Give this link a read. Be sure to explore the other links on the pages to learn about the values that can be assigned to position and their proper use.
http://www.sitepoint.com/web-foundations/position-css-property/
3 Likes
Best not to use absolute position at all for structural layout because that creates a rigid structure that is hard to maintain. Use absolute positioning in controlled spaces where you have accounted for the flow of the page by other means. e.g. you can absolutely place a small icon at the end of a line as long as the line has a height greater than that of the icon and that the place you place the icon is protected from other content overlapping it.
Almost never use relative positioning for structural layout either as that is not what its meant for. It’s meant for more subtle position changes that move elements without changing the flow of the document at all. Relatively placed elements that are moved with co-ordinates always preserve their original place in the flow so if you move a block 100px then you leave a 100px hole in the page and the moved element may overlap other content.
Most of the time no positioning is needed and columns can be created width display:table/table-cell, flexbox, inline-block or floats.
You can finely tune the position of elements by using margins or padding where appropriate.
Simplcity and maintainability is the key.
Always ask yourself what if this line wrapped to the next line or what happens if I need twice as much text in there?
3 Likes
The proof of the pudding is in the eating so generally if a site behaves well at various sizes and with varying content then it is a good start. The site uses a little absolute positioning but in a controlled space so that risk of problems are minimised. That’s not to say that its perfect because if you reduce the screen height then the absolutely placed content on the big picture is cut off. However as it is controlled it doesn’t overlap other content.
Most of the rest of the page doesn’t use positioning but floating and other methods. This comes back to my comments that you only need absolute positioning in small doses in controlled situations as most times something else works better.
2 Likes
I have used position: absolute to do things like placing links on specific points on a map image.
This relies on the containing frame having a fixed aspect ratio and to be responsive I use % to set the positions.
There is an example of this here http://burtonstatherheritage.org/location.php#tour
Though to make the targeted link embeds work, I had to put that code in a separate document to display in the iframe, so the document you are looking at in the frame is http://burtonstatherheritage.org/tour/map.php
1 Like
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.