I don’t really understand the purpose of position: relative;. Could you please explain more about what relative actually does?

That’s completely okay—positions in CSS can feel a bit tricky at first. The best way to get the hang of them is to experiment with different values in your code and observe how the output changes.

Now, let’s break down position: relative in a simple way.

When you apply position: relative to an element, it allows you to move that element relative to where it would have naturally appeared on the page. It doesn’t take the element out of the normal flow—it just lets you shift it a bit.

For example, imagine we have a div with this basic style:

.box {
  width: 100px;
  height: 100px;
  background: red;
}

Without any positioning, the browser places it in its default spot in the flow of the page.

Let's say you want to move this box 20px lower from where it currently is. You can do that like this:

.box {
  position: relative;
  top: 20px;
  width: 100px;
  height: 100px;
  background: red;
}

With position: relative and top: 20px, the box visually shifts down by 20px from its original location—but its original space is still preserved. That means other elements around it won’t move into the gap where it used to be.

You can also use left, right, or bottom in the same way to shift the element in other directions.