Category: Relative Positioning

Page Flow, Inline and Block Elements, and Relative Positioning

The HTML flow model is pretty simple: every element goes in a box, and the web browser stacks up those boxes when you view the page. Block boxes, which are generated by tags such as <p> and <h1>, get stacked on top of each other, while inline elements stay (surprise, surprise) in a line (unless the line reaches the edge of the container, in which case it runs over to the next line). Easy enough, right? Although elements have a default type (block or inline), you can change this in your CSS with the display: property. You can also set display: none, which keeps the element from being displayed on the page at all. All of these elements, whether block or inline, are considered to have static positioning.

However, when you use relative positioning, this actually removes an element from the flow. Your browser will render the page as if the relatively positioned element is where it’s “supposed” to be, but you can actually move it around; this may result in it covering up other elements. Absolutely positioned elements are also removed from the flow; as previously discussed, they’re placed relative to the closest ancestor which is relatively positioned (this may be the html element). While other elements behave as if relatively positioned elements are still at their normal location, they act as if absolutely positioned elements do not exist. Every absolutely-positioned element has its own z-index level, so that it will appear above or below anything it overlaps with (even other absolutely positioned elements); while these are set by default (with elements that appear later in the file getting larger z-numbers and appearing on top), you can override them using the z-index property.

Tip: Ever end up with an unclickable link on your webpage? This may be caused by a transparent, absolutely positioned element which is covering up the link. IE7 and below have a bug that allows you to click through the above element, so you’ll actually see the behavior you want (a clickable link) in IE6 and IE7, but not in modern browsers.