Layer things with relative and absolute

A “NEW” badge in the top-right corner of a card, a heading laid over an image, an ”×” mark in the corner of a button—the “layering” you see all over the web is mostly made with the combo of absolute and relative. It comes up so often that it’s worth learning as a whole pattern.

absolute floats, searching for its “reference point”

An element with position: absolute; leaves the normal flow and floats free. When it does, “what it floats relative to” matters a lot. Its reference is the nearest parent that has a position set. And if there’s no reference anywhere, it will fly off relative to—of all things—the whole screen.

So you put position: relative; on just the parent you want as the reference, telling it “use me as the reference point.”

The combo: place a badge on a card’s corner

Let’s look at it in its most classic form. We layer a badge (the child) in the top-right of a card (the parent).

<div class="card">
  <span class="badge">NEW</span>
  <p>This is a new article</p>
</div>

.card {
  position: relative;   /* ← this becomes the "reference" */
}
.badge {
  position: absolute;
  top: 8px;
  right: 8px;           /* layered in the card's top-right */
}

By putting relative on .card, the .badge floats relative to that card. With top and right, “8px from the top, 8px from the right” tucks it neatly into the top-right corner. By combining top, right, bottom, and left, you can freely place it in any corner or in the center.

Build it for real and it looks like this.

When you’ll use this

This combo comes up all the time.

• Badges like “NEW” or “SALE” on a card’s corner
• A title’s text layered over an image
• A close ”×” button in the corner of a button or panel
• A red notification dot on the top-right of an icon

Layer over a whole image: set all four sides to 0

The badge was a use where you place it on a single point at a corner, but if you set top, right, bottom, and left all to 0, you can layer the child at exactly the same size as the parent. It’s the go-to when you want to spread a caption across a whole photo.

<figure class="photo">
  <img src="view.jpg" alt="The view from the window">
  <figcaption class="caption">Today's sky</figcaption>
</figure>

.photo {
  position: relative;
}
.caption {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: flex-end;
  padding: 16px;
  color: white;
}

With top: 0; right: 0; bottom: 0; left: 0;, .caption overlaps exactly the same area as .photo. After that, display: flex; and align-items: flex-end; push the text inside to wherever you like (here, the bottom edge), and you’re done. Remember that you can layer not just at a single corner point, but across a whole surface.

Build it for real and it looks like this.

Summary of this lesson

1. absolute leaves the normal flow and floats relative to the nearest parent with a position set
2. With position: relative; on the parent + position: absolute; on the child, you can place it layered inside
3. With top, right, bottom, and left, place it exactly where you want—from a single corner to filling the whole surface
4. When you want to change the stacking order, use z-index (the larger the number, the closer to the front)

That wraps up a chapter of the CSS course. From color, text, and decoration to size, arrangement, and layering—you can now build a page’s appearance, from top to bottom, with your own hands. Dress the framework (HTML) however you like, arrange the parts freely, and layer them exactly where you want. Once you’re here, you’re a fine maker already.