CSS Position: Static and Relative

CSS Position: Static and Relative (Beginner’s Guide)

When you start learning CSS, layout can feel confusing. Why does one box move while another stays stuck? Why does your text jump when you add a new element?

In this article, you’ll learn two core building blocks of layout: position: static and position: relative. We’ll walk through simple, hands-on examples you can copy, run, and tweak yourself.

By the end, you’ll know:

What “position” means in CSS
How static and relative positioning behave
How to gently move elements using top, left, right, and bottom

Let’s take it step by step.

What Does "Position" Mean in CSS?

In CSS, the position property controls how an element is placed on the page.

It answers questions like:

Does this element follow the normal flow of the page?
Can I move it a few pixels up, down, left, or right?
Will other elements still act like it’s in its original spot?

There are several values for position (like static, relative, absolute, fixed, sticky). In this article, we’ll focus on the first two you should master:

position: static (the default)
position: relative (a small but powerful upgrade)

`position: static` – The Default Behavior

If you don’t set a position value, the browser uses position: static.

This means:

Elements appear in the order they are written in HTML
You cannot move them using top, bottom, left, or right
The page flows naturally, like text in a document

Example 1: Basic Static Positioning

Copy this into a new file called static-example.html and open it in your browser.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Static Position Example</title>
  <style>
    /* All boxes are static by default */
    .box {
      border: 2px solid #333;   /* Add a visible border */
      padding: 10px;            /* Space inside the box */
      margin: 10px 0;           /* Space between boxes */
    }

    .box.one {
      background-color: #fce4ec; /* Light pink */
    }

    .box.two {
      background-color: #e3f2fd; /* Light blue */
    }

    .box.three {
      background-color: #e8f5e9; /* Light green */
    }
  </style>
</head>
<body>
  <h1>Static Position</h1>

  <div class="box one">Box 1: I appear first.</div>
  <div class="box two">Box 2: I appear second.</div>
  <div class="box three">Box 3: I appear third.</div>
</body>
</html>

What you should see:

A title at the top
Three colored boxes stacked vertically
Box 1 at the top, then Box 2, then Box 3

This is normal document flow. Each box just sits below the previous one.

Try it yourself

In the <style> section above, add this inside .box.two:

    top: 20px;
    left: 20px;

Then refresh your browser.

Notice: Nothing changes. With position: static, top and left do nothing. That’s your first key lesson.

`position: relative` – Same Flow, But Movable

position: relative is like saying:

“Stay in the normal flow, but let me nudge you a bit from where you would normally be.”

With position: relative:

The element still takes up space where it originally sits
You can move it using top, bottom, left, and right
Other elements act like it never moved

This is great for small adjustments without breaking the layout.

Example 2: Making One Box Relative

Let’s modify the previous example so the second box is relative.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Relative Position Example</title>
  <style>
    .box {
      border: 2px solid #333;
      padding: 10px;
      margin: 10px 0;
    }

    .box.one {
      background-color: #fce4ec;
    }

    .box.two {
      background-color: #e3f2fd;

      position: relative; /* Now this box is relative */
      top: 20px;          /* Move it 20px down */
      left: 30px;         /* Move it 30px to the right */
    }

    .box.three {
      background-color: #e8f5e9;
    }
  </style>
</head>
<body>
  <h1>Relative Position</h1>

  <div class="box one">Box 1: I'm still in the normal flow.</div>
  <div class="box two">Box 2: I'm moved 20px down and 30px right.</div>
  <div class="box three">Box 3: I stay below Box 2's original space.</div>
</body>
</html>

What you should see:

Box 2 is slightly lower and to the right compared to Box 1
But Box 3 still appears as if Box 2 had not moved

That last part is important. There will be a small “overlap” or gap area, because Box 3 respects Box 2’s original position.

Try it yourself

Change the values of top and left in .box.two:

      top: -10px;  /* Negative moves up */
      left: 50px;  /* Positive moves right */

Experiment with positive and negative values. Watch how the box moves but the others don’t “follow” it.

You’ve just used position: relative to fine-tune the layout—nice job.

Understanding `top`, `left`, `right`, and `bottom`

When position: relative is applied:

top: 20px – move the element down 20 pixels from its original spot
bottom: 20px – move it up 20 pixels
left: 20px – move it right 20 pixels
right: 20px – move it left 20 pixels

Think of these as: “shift me this many pixels away from that side.”

You can also use negative values:

top: -20px moves the element up 20 pixels
left: -20px moves it left 20 pixels

Example 3: Highlighting a Box with Relative Position

Let’s use position: relative for something practical: making one box stand out.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Highlight with Relative Position</title>
  <style>
    body {
      font-family: Arial, sans-serif;
    }

    .card {
      border: 1px solid #ccc;
      padding: 15px;
      margin: 10px 0;
      background-color: #fafafa;
    }

    .card.highlight {
      position: relative;       /* Allow movement */
      top: -5px;                /* Lift it slightly up */
      left: 10px;               /* Shift it a bit right */
      border-color: #1976d2;    /* Stronger border color */
      box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* Soft shadow */
      background-color: #e3f2fd;             /* Light blue */
    }
  </style>
</head>
<body>
  <h1>Pricing Options</h1>

  <div class="card">Basic Plan</div>
  <div class="card highlight">Popular Plan (Highlighted)</div>
  <div class="card">Pro Plan</div>
</body>
</html>

What you should see:

Three "cards" stacked vertically
The middle card is slightly higher, shifted right, and has a shadow

We used position: relative to gently move the highlighted card to make it pop.

Try it yourself

Change the highlighted card’s top value to -20px and refresh. See how it moves more dramatically upwards. Play with the values until the spacing feels right to you.

This is a very common real-world use: nudging elements for visual emphasis.

Example 4: Creating a Simple Badge with `position: relative`

Another neat trick: you can use a relatively positioned container to place small decorations inside it, like a “NEW” badge.

We’ll only use relative here (and a hint of what absolute could do later).

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Badge with Relative Position</title>
  <style>
    .product {
      position: relative;           /* Base for positioning children later */
      border: 1px solid #ccc;
      padding: 20px;
      margin: 20px 0;
      width: 200px;
    }

    .badge {
      position: relative;           /* We can move this too */
      display: inline-block;
      background-color: #d32f2f;
      color: white;
      padding: 3px 8px;
      font-size: 12px;
      border-radius: 3px;
      top: -10px;                   /* Lift it above the text line */
    }
  </style>
</head>
<body>
  <div class="product">
    <span class="badge">NEW</span>
    <p>Awesome Product</p>
  </div>
</body>
</html>

What you should see:

A box labeled "Awesome Product"
A red "NEW" badge slightly raised above the text line

We used position: relative on both the product container and the badge. For now, it just lets us shift the badge up a bit.

Later, when you learn position: absolute, that .product { position: relative; } line will become even more important. It will act as an “anchor” for absolutely positioned elements.

Common Mistakes (and How to Avoid Them)

Expecting top / left to work without position: relative (or similar)
If nothing moves, check if position is set.
Forgetting that other elements still respect the original space
With relative, overlapping can happen. This is normal. If things look odd, reduce the movement values.
Using big offsets instead of fixing the layout
position: relative is for small adjustments, not for building entire page layout. Use it sparingly.

Quick Recap

You’ve covered a lot, especially if you’re new—well done.

Key takeaways:

position: static is the default. Elements follow normal document flow, and top, left, right, bottom do nothing.
position: relative keeps the element in the normal flow but lets you move it slightly from its original position.
top, left, right, and bottom measure how far to move from the element’s original spot. Positive and negative values change the direction.
relative is perfect for small layout tweaks, highlights, and subtle adjustments.

What’s Next?

When you’re comfortable with static and relative, the next step is to learn:

position: absolute – for placing elements exactly where you want
position: fixed – for sticky headers or always-visible buttons

For now, keep experimenting:

Add more boxes and try different top/left values
Combine colors, borders, and position: relative to create your own custom layouts

Every small experiment builds your skills. Keep going—you’re already on the right track.

Mudzinga