CSS Positioning: Beginner Intro to CSS Positioning

What is CSS positioning?

CSS position is the location where an element will be placed in a document. Using the top, bottom, right, and left attributes, you can specify the exact position of an element.

Types of CSS positions

There are five CSS positioning types:

• Static

• Relative

• Absolute

• Fixed

• Sticky

Let’s look at each.

Static Positioning

This is the default positioning of elements in a document. It positions them from top to bottom.

You can also use it to reset the position of an element that has a positioning you don’t need. It neither affects the parent nor the surrounding elements.

Here, Child1 assumes a static position.

Relative positioning

When an element assumes this position, it is placed relative to its initial position. However, should you use it and not indicate the top, right, left, or bottom coordinates, it will assume a static position.

If you give it an attribute of left: 50px, it will move 50px from the left.

Here, Child1 has a relative position with the left set to 50px.

Besides, a parent with a relative positioning allows you to absolutely position child elements within it. As such, you can position the elements anyhow you want.

Absolute positioning

Yet another powerful CSS positioning type that allows you to position elements where you want them.

It allows you to ignore the normal document flow by setting the top, right, bottom, and left attributes.

The values have to be relative to the parent element with relative positioning.

If there lacks a parent, the element will position itself relative to the HTML document. This position does not affect adjacent elements.

All the four child elements have different absolute positions.

Fixed positioning

As the name suggests, the element is fixed to its position when you scroll the page.

That said, it assumes an absolute position allowing you to set the top, bottom, left, and right attributes.

Remember the element is positioned relative to the viewport.

The Nav has a fixed position.

Sticky positioning

Like the static position, sticky positioning positions elements according to normal document flow.

While fancy, not all browsers support it. As you scroll through the page, the element assumes a relative position until the viewport location reaches the specified point.

For example, top: 0.

Here, the home section is sticky.