CSS Position

Most elements sit where the browser puts them, one after another, top to bottom. The position property lets you break out of that flow and place an element exactly where you want it — a badge on the corner of a card, a menu that stays at the top while you scroll, a button fixed to the corner of the screen.

Diagram — see how it fits together

There are five position values. The default is static. The other four — relative, absolute, fixed and sticky — each move an element in a different way. Learn them one at a time, and the whole layout system starts to make sense.

Static — the default, no moving

position: static is what every element has unless you change it. The element sits in the normal flow of the page, exactly where the HTML puts it. The top, right, bottom and left properties do nothing on a static element — the browser simply ignores them.

Relative — move it, but keep its space

position: relative lets you nudge an element away from its normal spot with top, right, bottom or left. The important part: the space it came from stays reserved. The other elements do not move up to fill the gap — the page keeps the hole where the element used to be.

.badge {
  position: relative;
  top: -10px;
  left: 20px;
}

Absolute — placed against its parent

position: absolute takes the element out of the normal flow completely. Other elements behave as if it is not there at all. It is then placed against its nearest positioned ancestor — the nearest parent that has a position other than static. If no parent is positioned, it is placed against the page itself. This is how badges, labels and close buttons sit neatly in the corner of a card.

.card {
  position: relative;
}
.card .badge {
  position: absolute;
  top: 10px;
  right: 10px;
}

Fixed — stays put while you scroll

position: fixed also takes the element out of the flow, but it is placed against the browser window, not against any parent. Scroll the page up and down and the element stays in exactly the same spot on the screen. This is how "back to top" buttons and chat buttons work.

Sticky — scrolls, then sticks

position: sticky is a mix of relative and fixed. The element scrolls normally with the page — until it reaches the position you set with top. Then it sticks there and stays visible while the rest of the page scrolls past. Section headings and navigation bars use this all the time.

Z-index — which element is on top

When positioned elements overlap, z-index decides which one is on top. A higher number wins. But there is a rule beginners miss: z-index only works on elements that have a position other than static. Set z-index: 10 on a static element and nothing happens.

.popup {
  position: absolute;
  z-index: 10;
}
.card {
  position: relative;
  z-index: 1;
}

Common mistakes

• Using position: absolute without giving the parent position: relative, so the element lands in the wrong corner.
• Setting z-index on a static element and wondering why the stacking does not change.
• Using position: fixed for a button and letting it cover the page content on a small screen.
• Using position: sticky inside a parent that has overflow: hidden — the sticky element then never sticks.
• Moving a relative element with top and forgetting its original space stays reserved, leaving a gap.

Remember

• Static is the default — the element sits in the normal flow and cannot be moved.
• Relative moves the element but keeps its original space reserved.
• Absolute leaves the flow and positions itself against the nearest positioned parent.
• Fixed stays in the same spot on the screen while the page scrolls.
• Sticky scrolls normally, then sticks when it reaches your top value.
• z-index only works on positioned elements — higher numbers sit on top.

Example explained

• .sticky-bar { position: sticky; top: 0; } — the blue bar scrolls with the page, then sticks to the top of the screen once it reaches the top edge.
• .card { position: relative; } — the card stays in the normal flow, but because it is positioned, the badge inside it can use it as an anchor.
• .badge { position: absolute; top: -12px; right: 16px; } — the NEW badge is placed against the card, half hanging out of the top edge, 16px from the right.
• .avatar { width: 90px; height: 90px; border-radius: 50%; } — a square box with fully rounded corners becomes a circle, used here for the student's initials.
• .top-btn { position: fixed; right: 20px; bottom: 20px; } — the Top button is fixed to the browser window, so it stays in the bottom-right corner even when the page scrolls.