CSS: Positioning elements

Written by Edalí Cárdenas / Fellow at DCI

Positioning elements might be one of the most tricky properties while working with CSS. To master your CSS skills, I highly recommend to try out manipulating the location of the elements in your document. Keep reading here to find out what are the different values for positioning using CSS.

Syntax

When you are willing to arrange the position of an element, you can select from different types: static, relative, absolute, fixed, sticky…

When the position is other than static you will have to specify with the properties top and bottom the vertical offset, and with left and right the horizontal offset from its normal position.

Here you can see an example:

Static: The element is positioned following the normal flow of the document. Since this is the default value, the top, right, bottom, left properties are not applied here.

Relative: The position of the element goes with the normal flow of the document, and then offset relative to itself based on the properties of top, right, bottom, and left. Since the offset does not affect the position of any other elements, the space given for the element is reserved the same as if position were static.

Absolute: This value takes the element out the normal document flow, which means that no space is created for the element in the page layout. The position is set up according to the values of top, right, bottom, and left. This value can have margins, and they do not collapse with any other margins.

Fixed: Similar to the absolute position, the element is out from the normal document flow and no space is reserved for the element in the page layout. The difference is that fixed position is rather relative to the screen’s viewport and doesn’t move when you scroll. The position is determined by the values of top, right, bottom, and left. This value always creates a new stacking context. When there is an ancestor with properties such as transform, perspective, or filter set to something other than none, that ancestor is used as the container instead of the viewport (see CSS Transforms Spec in MDN).

Sticky: The position of the element goes along with the normal flow of the document, and then offset relative to its flow root and containing block, based on the values of top, right, bottom, and left. The offset does not affect the position of any other elements. This value will not work inside element with overflow: hidden or auto.

Tip: Read also about floats, this will also require you to get some practice before you master it!