Exercise: Badges and a Sticky Header

Pin New! badges to the corners of Paws & Whiskers' pet cards, lay an overlay over a photo, make the header stick and the Adopt today button stay on screen, and choose what sits in front, while the tests check every rule.

Apprentice · CSS · Updated

Paws & Whiskers has six pets ready for a home, and three of them arrived this week. The shelter wants visitors to spot the newcomers at a glance, to see that Clover already has a family on the way, and to find the Adopt today button wherever they are on the page. The page has its colors and fonts already. What it doesn't have yet is a single positioned element, and that's your job: five rules, and a plan for what sits in front of what. Tests check each one as you go.

Get the exercise code

In the Exercise box beside the lesson, choose Get the starter on GitHub to open its GitHub repository. Click Code, then Download ZIP, and unzip it into your css-in-depth folder. Then open the folder in VS Code.

The folder holds:

  • index.html: the adoption list, with its header, six pet cards, the Adopt today button and a footer. Ready to use: don't change it.
  • styles.css: Part 1 is the look, ready to use. Part 2 is where your rules go. For you to finish.
  • images/: drawings of the six pets, standing in for photos. Ready to use.
  • page.test.js and package.json: the tests that check your rules. You don't need to change these.

Everything you need is in the folder: the page is handed over, so you can spend your time on the positioning.

What to do

Open index.html with Live Server first, and scroll. The New! badges sit inside each card's text, the Adoption pending note sits under Clover's photo, and the header and the button scroll away. Each card is built like this, in the HTML you were given:

<article class="pet-card">
  <span class="badge">New!</span>
  <div class="photo">
    <img src="images/clover.svg" alt="Clover, a gray lop-eared rabbit, nibbling a carrot">
    <p class="pending-overlay">Adoption pending</p>
  </div>
  <h2>Clover</h2>
  <p>A calm 2-year-old rabbit. A family is meeting her on Saturday.</p>
</article>

Then write your rules in Part 2 of styles.css, one at a time, saving and looking at the page after each:

  1. Pin the badges. Each New! badge goes in the top right corner of its own card, 8 pixels down and 8 pixels in.
  2. Lay the overlay over Clover's photo. It covers the whole photo, edge to edge, so its frame is .photo, not the card.
  3. Stick the header to the top of the window while the list scrolls under it.
  4. Fix the Adopt today button 24 pixels from the bottom and 24 pixels from the right of the window.
  5. Make a stacking plan. The badge goes in front of the overlay, the header in front of everything on the cards, and the button in front of everything. Choose the z-index numbers yourself.

Check your work

Open a terminal in VS Code (Terminal > New Terminal) and run npm install once, to download what the tests need. After that, run the tests whenever you like:

npm test

At first, the first test passes (the page is already there) and the other eight fail. Each rule you finish turns its test green. A failing test's message says what it found, for example On Clover's card, the overlay covers the badge (badge: z-index auto, overlay: z-index auto). The overlay comes later in the HTML, so it wins a tie.

The tests read your rules, not the screen, so scroll the page too. The README's checklist says what to look for.

Hints

  • Every badge in one corner of the page? An absolute element is placed in its nearest positioned ancestor. Positioning: relative and absolute shows which line the card needs.
  • Four offsets, one property. One property sets top, right, bottom and left to the same value at once.
  • A sticky header that scrolls away is missing a top value. Positioning: fixed and sticky lists the three things to check.
  • Ties go to the later one. When two positioned boxes have the same z-index, the one later in the HTML is in front. In index.html, the overlay comes after the badge. See Stacking: z-index and What Sits on Top.
  • Scroll slowly and watch the header's bottom edge as the badges pass under it. If a badge shows on top, which of the two has the higher z-index?

When you're done

Every test is green, and npm test prints:

> exercise-css-adoption-cards-badges@1.0.0 test
> node --test

✔ 1) index.html links styles.css, and has the adoption list (1.6957ms)
✔ 2) every pet card is the frame its badge is placed in (35.8786ms)
✔ 3) every New! badge sits in the top right corner of its card (2.7835ms)
✔ 4) the Adoption pending overlay covers the whole photo (2.374ms)
✔ 5) the New! badge is in front of the Adoption pending overlay (2.1167ms)
✔ 6) the header sticks to the top of the window (0.71ms)
✔ 7) the header is in front of every card, badge and overlay that scrolls under it (1.4446ms)
✔ 8) the Adopt today button stays in the bottom right corner of the window (1.2296ms)
✔ 9) the Adopt today button is in front of everything, the header too (0.511ms)
ℹ tests 9
ℹ suites 0
ℹ pass 9
ℹ fail 0
ℹ cancelled 0
ℹ skipped 0
ℹ todo 0
ℹ duration_ms 746.7157

Your times will differ. Now look back at your z-index numbers. If the shelter asked for a "Share" button on each photo, in front of the overlay but behind the header, is there a number free for it in your plan?

So what

Badges, overlays, a header that stays in reach and a button that never leaves the screen are on nearly every site you'll ever build, and now you've built all four, with a stacking plan that keeps them in order.

Key terms

Related