Dev.to

How to Position Elements Using CSS

This post was originally published at thedevspace.io. Everything you need to master web development, all in one place. The position property controls how you wish to position an element. There are five different position methods available, including static, relative, fixed, absolute, and sticky. static is the default positioning method, meaning the element is not positioned in any special way. Things get more interesting starting from the relative position. Relative position With the position set to relative, the element will be placed relative to its default position. It can be adjusted by setting the left, right, top, or bottom properties. Static Relative .static { position: static; } .relative { position: relative; top: 10px; left: 20px; } Visit Code Demo

Apr 7, 2025 - 15:20
 0
How to Position Elements Using CSS

This post was originally published at thedevspace.io. Everything you need to master web development, all in one place.

The position property controls how you wish to position an element. There are five different position methods available, including static, relative, fixed, absolute, and sticky. static is the default positioning method, meaning the element is not positioned in any special way.

Things get more interesting starting from the relative position.

Relative position

With the position set to relative, the element will be placed relative to its default position. It can be adjusted by setting the left, right, top, or bottom properties.

 class="static">Static
class="relative">Relative