Guide to CSS Positioning

If you are unfamiliar with using CSS to control the layout of web pages, you may find it difficult to understand the different positioning and display types that can be applied to HTML elements. This article explains both concepts in an easy to understand manner, making you a CSS whiz in no time.

Positioning

There are currently four types of CSS positioning that can be applied to HTML elements.

Static

Static is the default position for most elements, and is very similar to relative. Static elements, if they are block-level, will stack vertically one after another. See a static positioning example.

Relative

Relative positioning is similar to static positioning, where elements will stack vertically to reflect the flow of the HTML. However, the added feature of relative positioning is that you can offset a relatively positioned element using the top and left attributes. See a relative positioning example.

Absolute

Absolute positioning allows you to specify the position of an element within the confines of a parent element. In order to achieve this, the parent element must have its position set to relative. It is also important to understand that absolute elements are taken out of the flow of the document and exist in their own layer. A z-index is automatically assigned to an absolutely positioned element based on the order in which it appears in the HTML. However, it is possible to override this by specifying your own z-index in a style sheet.

Note: A z-index only applies to absolute elements and an absolutely positioned element will NOT stretch its parent container. View an example of absolute positioning.

Fixed Positioning

Fixed positioning allows you to position an element that will be permanently fixed in position, even if the screen scrolls. Unfortunately, Internet Explorer 6 or below does not yet support this type of positioning. View an example of fixed positioning.

Display Types

I think it is also important to mention the two main types of display options for an element: block and inline. I will briefly discuss them here

Block

A block level display is the default type for div, p, ul, li and many more. A block level element will utilise any width available to it (i.e. inherit the width from its parent element) unless explicitly defined. Block-level elements begin on new lines.

Inline

Inline display is the default type for a, span, code and more. Inline elements display as their name suggests: in a line. The width of an inline element is only as wide as its content.