19. CSS Position

What you will learn

• The five position values
• How top, right, bottom, and left work
• How to place a badge on a card
• How to make a sticky header
• How z-index stacks overlapping elements

The position property

Relative

A relative element keeps its space in the page, but top, left, right, and bottom shift it visually from where it would normally be.

<style>
  .shifted {
    position: relative;
    left: 40px;
    top: 10px;
    background-color: #cfe6ff;
    padding: 8px;
  }
</style>

<p>Normal paragraph</p>
<p class="shifted">Shifted 40px right and 10px down</p>
<p>Normal paragraph</p>

Absolute

An absolute element leaves the normal flow, so other content closes the gap. It is placed relative to its nearest ancestor that has a position other than static. If there is none, it uses the page.

That is why the usual pattern is: position: relative on the parent, and position: absolute on the child.

<style>
  .card {
    position: relative;
    width: 260px;
    padding: 20px;
    background-color: #eaf5ff;
    border: 1px solid #cfe6ff;
    border-radius: 8px;
  }
  .badge {
    position: absolute;
    top: 8px;
    right: 8px;
    background-color: crimson;
    color: white;
    font-size: 12px;
    padding: 2px 8px;
    border-radius: 10px;
  }
</style>

<div class="card">
  <span class="badge">New</span>
  <p>A course card with a badge in the corner.</p>
</div>

Fixed

A fixed element ignores scrolling. It is perfect for a “back to top” button or a cookie notice.

.to-top {
  position: fixed;
  bottom: 20px;
  right: 20px;
}

Take care that fixed elements never hide important content, especially on small screens.

Sticky

A sticky element scrolls like normal until it reaches the offset you set, then it stays in place inside its parent. A sticky site header uses top: 0.

.site-header {
  position: sticky;
  top: 0;
  background-color: white;
}

Stacking order with z-index

When positioned elements overlap, z-index decides which is in front. A higher number sits on top. It only works on positioned elements (anything except static).

<style>
  .stack { position: relative; height: 110px; }
  .stack div {
    position: absolute;
    width: 120px;
    height: 80px;
    color: white;
    padding: 6px;
  }
  .one { background-color: #0d6efd; left: 0; top: 0; z-index: 1; }
  .two { background-color: crimson; left: 50px; top: 20px; z-index: 2; }
</style>

<div class="stack">
  <div class="one">z-index 1</div>
  <div class="two">z-index 2</div>
</div>

Common mistakes

• Using absolute without a positioned parent, so the element jumps to the corner of the page.
• Setting top or left on a static element, which does nothing.
• Huge z-index numbers such as 99999. Keep a small, organised scale.
• sticky failing because a parent has overflow: hidden.

<style>
  .box {
    position: relative;
    width: 200px;
    height: 100px;
    background-color: #eaf5ff;
    border: 1px solid #0d6efd;
  }
  .tag {
    position: absolute;
    bottom: 6px;
    right: 6px;
  }
</style>
<div class="box">
  <span class="tag">Tag</span>
</div>

Summary

• The five values are static, relative, absolute, fixed, and sticky.
• Give the parent position: relative to anchor an absolute child.
• Use z-index for stacking, and use positioning for details rather than whole layouts.