Today we’ll continue our tour of CSS features and delve into the quirks of positioning elements on a web page.

A DOM Element has 3 dimensions, one for each axis. The X and Y axes place an element on the page, horizontally and vertically. The Z axis brings elements closer or farther from the user. Also, the Z axis is used when deciding what element will be shown when two or several elements have overlapping content.

The most common way of adjusting the position of an element on the page is by specifying the value of the position property accordingly. In this article, we’ll only address the horizontal and vertical position, discussing two of the values they can take. The rest of these values will be discussed in the next article.

Static Position

Elements with a static position follow the normal flow of the document. The term static comes from the fact that the element does not have a custom position. In the example on the left, all div elements have a static position and the same width and height. As you can can see, they are placed one after the another.

This is the default value for the position property, which means there’s no need to set it manually. However, it can be set using the following CSS rule, which will make the element with the someElement ID gain a static position.

#someElement {
position: static;
}

Elements with a static position will not be affected by the top, bottom, left, right and z-index CSS properties. This is important when keeping to the rule of static elements, i.e. “Stick to the document flow.” Also, please note that:

• If no width is set for a static element, it will be computed differently, according to its display. Block elements will have a width 100% equal to the width of its parent; if the parent is the document body and no width has been specified for the body, the width will stretch and cover the entire page. Inline and inline-block elements will have a width stretched to their flow content, so that they can contain all of its static and relatively positioned children.

• If no height is set for a static element, its height will be adjusted to its flowing content, which means that its height will be equal to the total height of its static and relatively positioned children.

Use static position for elements that should follow the flow. Do not use static position for elements that should have a custom position.

Relative Position

Elements with a relative position will also follow the normal flow of the document, but can be displayed in a different position. This means that the box of the element will be considered unchanged, while the visual representation of the element can be placed elsewhere. The term relative derives from the fact that the element is placed relatively to its normal position.

This example is the just like the one for static positioning, except for the third element, which has a relative position and is moved to the right. As you can see, the normal flow is not affected. This effect has been achieved by setting the position property to relative and the left property to 40px.

#id3 {
    position: relative;
    left: 40px;
}

If you want to place it 20 px higher, you’ll have to use the bottom property instead. The left and right properties can be used in a similar fashion. Also, please note that:

• Using both left and right or top and bottom properties at the same time makes no sense: top always overrides bottom, while left overrides right on left-to-right display and right overrides left on right-to-left display.
• These properties can also take negative values. Using a negative value has the opposite effect of using the positive value, therefore the following rules are identical. The same rules apply for static elements if no width or no height is set for a relative element.

<code>top: 20px;
bottom: -20px;

Use relative position for elements that should be shifted only a bit from their original position as well as for elements that need to create a containing block (more on this in our next article). Do not use relative position for elements with positions that should be relative to an ancestor or for animations, use transforms instead.

To Recap

Mastering these CSS concepts is vital for any front-end designer, but once you understand how the elements are positioned with CSS, creating websites and apps will be much easier.

Here are a few things to keep in mind as far as the position property goes.

• If you want all elements to follow the document flow, leave them in their default static position
• Use relative positioning for elements that need to change their position to a certain extent
• When creating the layout for a web app or site, make the most of the position values.

We have not yet covered the absolute, fixed or floating position, but they will be the subject of our next article. We’ll also be discussing containing blocks, so stay close. 😉