Relative CSS Positioning

I learned a couple of CSS positioning rules that are not immediately apparent from reading W3Schools. Web designers are familiar with these rules, but this information needs to trickle down to us brute-force developers.

The position CSS style
Here are some rules I learned from Aucustic Cuckoo.

The position: relative and position: absolute styles don't work the way you might expect as a developer. We expect that absolute means to set the position from the top-left corner of the window, and that relative means to set the position from the container. Both of these assumptions are wrong.

If you don't set a position CSS style on your element, the browser lays it out based on the surrounding elements and reserves space for it. This is called static positioning.

The position: relative setting positions the element based on its static position. The element still takes up space as if it were in its static position. On its own, it's almost useless.

The position: absolute setting positions the element based on its containing block. The containing block is a parent element that is not statically positioned. Most of the time, that means you are placing elements in window coordinates.

To get the most out of these settings, you have to use them together. Set the position of a parent div to relative, but don't touch any of its other positioning properties. This will cause the parent to act as if it were statically positioned, but qualify as a containing block. Then you can set the position of child elements to absolute to position them relative to the parent. Yeah, it blew my mind, too.

The right and bottom CSS styles
Here's one I picked up from watching a video on css-tricks.com. Chris doesn't explicitly call this out, so I had to pause the video to read his CSS.

I usually move elements by setting their X and Y coordinates. To me, X maps to left and Y maps to top. It never occurred to me that an element has right and bottom properties, too.

If you set the right property and not the left, then the right side of the child element will be positioned relative to the right side of the parent. So if you want to right-align an image inside a div, set the div position to relative, the image position to absolute, and the image right to 0. Same thing for the bottom.

The float and clear styles
And finally, here's one from BarelyFitz.

The float style is usually used to wrap text around an image. But web designers have figured out how to use this property for columns. If you float your main content to the left or right, then your side bar will sit nicely next to it. But be sure that the floating element has greater height, or the other elements will wrap around it at the bottom. That's why the main content is usually floating, and not the sidebar.

To put more content after all of the floating elements, set the clear property to both. This could be used to put a footer on a page, but is not as easy as nesting divs. Put the side bar and the content in one div, and the footer in another.

One Response to “Relative CSS Positioning”

  1. Catto Says:

    Hey Now Michael,
    Nice Post, I"ve really enjoyed your blog & pod (good content) since we met in Dallas. Congrats again on winning.
    Thx,
    Catto

Leave a Reply

You must be logged in to post a comment.