tailwind1-5  Exercise 2: A Sticky Header That Sticks, and Stays on Top
======================================================================

Part 1: the header does not stick.

<div class="overflow-hidden">
  <header id="hA" class="sticky top-0 h-12 bg-yellow-200">header</header>
  <div style="height: 800px">content</div>
</div>

Scroll 200px into the wrapper, then read the header's top edge:

  window.scrollTo(0, wrapperTopOnPage + 200);
  console.log(document.getElementById('hA').getBoundingClientRect().top);

Output (measured in headless Chrome):

  -200        (the header scrolled away with the page: it did not stick)

The fix that keeps the clipping: change overflow-hidden to overflow-clip.

<div class="overflow-clip">
  <header id="hB" class="sticky top-0 h-12 bg-yellow-200">header</header>
  <div style="height: 800px">content</div>
</div>

Output (same scroll position):

  0           (stuck to the top of the viewport)

Part 2: a card scrolls under the header and covers it.

<header id="hC" class="sticky top-0 h-12 bg-yellow-200">header (no z-index)</header>
<div style="height: 400px">intro</div>
<div id="cardC" class="relative h-24 bg-blue-200">card (relative)</div>

Scroll until the card's top is 20px below the top of the viewport (so the card overlaps the header's 48px), then ask which element is on top at x 50, y 30:

  window.scrollTo(0, cardTopOnPage - 20);
  console.log(document.elementFromPoint(50, 30).id);

Output:

  no z-index on the header:   the card   (cardC in my test page: the card is painted over the header)
  with z-10 on the header:    the header (the header stays on top)

The one-class fix: <header class="sticky top-0 z-10 h-12 bg-yellow-200">.

WHY THIS WORKS AS AN ANSWER
---------------------------
Part 1: sticky sticks relative to the nearest ancestor that scrolls. overflow: hidden (like auto and scroll) turns the wrapper into a scroll container, so the header is
"sticky inside the wrapper", and the wrapper itself does not scroll: the header just moves with the page (-200 = the 200px we scrolled). overflow: clip clips the same
way but does not create a scroll container, so the header goes back to sticking to the viewport.
Part 2: the header and the card are both positioned and neither has a z-index, so they are painted in HTML order and the later one, the card, is on top where they overlap.
z-10 on the header puts it in a higher layer than the auto-level card. A z-index only matters between elements that are positioned (or flex/grid items), which is why the
card needed relative to cause the problem in the first place.