Author: Gaurav Maurya

Url: https://medium.com/@gauravkmaurya09/css-positioning-explained-7279b1429f05

Date Published: September 14, 2025

Content:

CSS Positioning Explained

When you place elements on a webpage, by default they just stack up one after another. But sometimes you want more control — like moving a button slightly, fixing a navbar at the top, or placing text over an image.

That’s where CSS positioning comes in.

Every element in CSS can be positioned using the position property. Let’s explore all the types one by one.

<body>
  <div class="container">
    <div class="box-1">Box 1</div>
    <div class="box-2">Box 2</div>
    <div class="box-3">Box 3</div>
  </div>
</body>

We’ll keep one parent (container) and three children (box-1, box-2, box-3). Now let’s see how each position type changes their behavior.

1️⃣ Static (Default)

.container {
  background: lightgray;
  width: 300px;
  height: 300px;
}
.box-1, .box-2, .box-3 {
  background: lightblue;
  margin: 10px;
  padding: 20px;
  position: static; /* default */
}

👉 Result:

All boxes appear one after another, stacked vertically (normal flow)

You cannot move them with top, left, etc.

2️⃣ Relative

.box-2 {
  position: relative;
  top: 20px;
  left: 20px;
  background: lightgreen;
}

👉 Result:

box-2 moves 20px down and 30px right.

But its original space is still reserved.

So you’ll see a “gap” where it was.

3️⃣ Absolute

.container {
  position: relative; /* important */
}
.box-2 {
  position: absolute;
  top: 30px;
  left: 20px;
  background: pink;
}

👉 Result:

box-2 is taken out of the flow.

Since .container is relative, box-2 positions itself inside the container

Boxes 1 and 3 stack normally, but box-2 “floats” above them.

4️⃣ Fixed

.box-1 {
  position: fixed;
  bottom: 0px;
  right: 0px;
  background: orange;
}

👉 Result:

box-1 is no longer inside .container.

It sticks to the viewport

Even if you scroll, it stays fixed.

5️⃣ Sticky

.box-2 {
  position: sticky;
  top: 0;
  background: yellow;
}

👉 Result:

box-2 acts like relative until you scroll.

When you scroll .container, it sticks to the top of its parent.

Perfect for sticky headers.

6️⃣ z-index

When elements overlap (because of absolute, relative, fixed, etc.), z-index decides which one appears on top.

.box-1 {
  position: absolute;
  top: 40px;
  left: 40px;
  background: red;
  z-index: 1; /* sits above box-2 */
}
.box-2 {
  position: absolute;
  top: 60px;
  left: 60px;
  background: blue;
  z-index: 0; /* stays below box-1 */
}

👉 Result:

Even though box-1 and box-2 overlap, box-1 will always appear above box-2 because its z-index is higher.

If you don’t set z-index, the element that comes later in the HTML will usually appear on top.

Note : Think of z-index as layers of paper on a desk.

Higher z-index = paper on top.

Lower z-index = paper underneath.

✅ Mental Model

Static → Stay where you are.

Relative → Move a little, but remember your seat.

Absolute → Float freely inside my parent.

Fixed → Stick to the screen, ignore parents.

Sticky → Be normal until scrolling, then stick.

You can find me on X 🍻

https://x.com/gauravkmaurya09

References🍻

https://youtu.be/7rrUVevoECg?si=XlpSrxQgnOYcvtRA

Reply Return to List Page