Positioning for sanity

The most common complaint I hear about CSS is the confusion surrounding the position property - specifically where absolute and relative are concerned. This can be confusing, so I'll attempt to explain it in very simple terms.

Let's start with what they are. Each represents a state of position which is relative to a specific element in the page. The main difference is where the position is measured from.

The easiest one to grasp is relative. This is because it follows on immediately after the one before and is measured from the baseline of its predecessor. Everything is positioned relatively by default where no positional attribute is given. These elements remain within the flow of the document object model

Absolute positioning is slightly more tricky to grasp as it can appear to change, although it doesn't really. Its behaviour is based on the positional attribute of the parent elements. This means that if no attribute is set, it will default to being absolutely positioned to the window, not the page as the parent tag for the page is tag, which is the window bounds by default. The element is also removed from the flow of the document object model so improper use can cause layouts to break.

However, if you have a button that requires a tooltip, you could include a within the button that contained the tooltip text with a display property of none. With relative positioning applied to the button and absolute positioning applied to the span within that button, the tooltip would be positioned outside of the page flow and appear to be within a block all by itself.

I will go into this in more detail at a later date, but I have other things to do now.