CSS elements positioning

Understanding of positions in CSS is one of the key skills of frontend developers. It helps you to change the behavior of each element on a web page. Additionally, with a mix of positions, you can change the behavior of the inner (child) elements.

Static, relative, absolute, fixed – differences

The position static is a default value of the position, which includes every element on a web page.

The position relative is making an element relative to itself. You can easily understand it with the following code:

<p>
    Lorem
    <span> ipsum</span>
</p>

And create the SASS:

span
  position: relative
  top: -10px

What you should see before appending the styles is as shown in the following:

In addition, after appending the styles you will see the following:

As you can see, when we change the position to relative and move it with property top, left, right, or bottom, we will move the element from its current position.

Additionally, relatively positioned...