tailwind1-5  Exercise 1: A Badge That Belongs to Its Card
=========================================================

<div id="card" class="relative ml-10 mt-5 h-[150px] w-[300px] bg-gray-100">
  <span id="badge" class="absolute top-2 right-2 size-6 bg-red-400"></span>
  <a id="link" href="#" class="absolute inset-0"></a>
</div>

  relative (on the card)   the card is the reference box for everything absolute inside it
  absolute top-2 right-2   the badge sits 8px from the card's top edge and 8px from its right edge (top-2 / right-2 = 2 x 4px)
  size-6                   a 24px square
  absolute inset-0         the link covers the whole card (top, right, bottom and left all 0), so clicking anywhere on the card follows it
                           (give the link text for screen readers, for example <span class="sr-only">Read more</span>. Because the link comes later than the badge it is painted
                           over it, so if the badge needs its own click, give the badge relative z-10, the same rule as the header in the next exercise; not measured here)

Measure it in the browser console:

  const R = id => document.getElementById(id).getBoundingClientRect();
  const c = R('card'), b = R('badge'), l = R('link');
  console.log({ badgeFromRight: c.right - b.right, badgeFromTop: b.top - c.top, linkSize: [l.width, l.height], cardSize: [c.width, c.height] });

Output (measured in headless Chrome):

  { badgeFromRight: 8, badgeFromTop: 8, linkSize: [300, 150], cardSize: [300, 150] }

Now remove the class "relative" from the card and measure the badge against the page:

  console.log({ badgeRight: b.right, badgeTop: b.top, cardRight: c.right, cardTop: c.top, viewportWidth: document.documentElement.clientWidth });

Output:

  { badgeRight: 861, badgeTop: 8, cardRight: 340, cardTop: 190, viewportWidth: 869 }

WHY THIS WORKS AS AN ANSWER
---------------------------
An absolutely positioned element looks for its nearest ancestor with a position other than static. With relative on the card there is one, so top-2 right-2 are measured
from the card's own edges: 8px and 8px, and the stretched link is exactly the card's size, 300 x 150.
Without relative there is no positioned ancestor, so the badge is placed against the page's top-right corner: its right edge is at 861 (the viewport is 869 wide, minus 8
for right-2) and its top is at 8, while the card is at right 340 and top 190. The badge has jumped away from its card, and nothing in the HTML changed, only one class.
relative on its own moves nothing (no offsets), which is why it is the usual "this is the reference box" marker.