×

css · level 2 · unit 5 · lesson 2

  1. meet it
  2. guess first
  3. your turn
  4. fix it
  5. nailed it

Tap a green word if you get lost.

meet it

pins a box to its 's corner.

position: absolute lifts a box out of the normal flow. The boxes around it close up as if it were gone, and its offsets now place it exactly.

Exactly where? Against its nearest ancestor: an element it sits inside, at any depth, whose position is anything except static. With no such ancestor, it uses the whole page.

So the trick is a pair: position: relative on the card, with no offsets, and position: absolute on the badge, with top and right.

<div class="card">
  <span class="badge">New</span>
  <h2>Lemon cake</h2>
  <p>Fresh this morning.</p>
</div>
.card {
  position: relative;
  padding: 24px;
  background-color: lavender;
}
.badge {
  position: absolute;
  top: 8px;
  right: 8px;
}

Press show my page to see it here.

Remove position: relative; from .card and the badge flies to the corner of the page.