◄► What are the differences between relative, absolute, and fixed positioning? ◄►

There are different ways to position elements on a page, and a common way to do this is by using the aptly named position property. This specifies how the element behaves, and the values associated with it set rules as to how the element can move.

Position values

While we are mostly focusing on just three of these, there are actually five values that can be used with the position property. These are:

• static
• relative
• fixed
• absolute
• sticky

Relative

relative is when the element is positioned relative to it's original position on the page. If it has positional changes, like being told to move left, that direction is relative to it's original, static position. Relative positioning also allows you to use a z-index on the element, which you can't do with static positioning.

Absolute

abolute positioning allows you to choose exactly where you want the element - so it can be very powerful. This is usually added to a child element where the parent element was relative. The relative parent element then gives context as to where the child is being positioned from and gives limitations based on the parent elements placing and size.

An absolute property doesn't have to be tied to a parent element, however. If it doesn't have one, it will instead will default to the html element for positioning. Absolute positioning can be really useful, however it can limit your site's flexibility if it's overused.

Fixed

fixed positioning is great for things like navigation bars. It allows an element to stay visible on the page the whole time, as it will move with the viewport. This can cause issues with overlapping content though, so this needs to be used carefully.

If you're interested in learning more about position and the different values check out this great article by CSS-Tricks.com.