Brainlag
  1. Web
  2. The page
19/38 lessons

Position: badges, overlays and sticky headers

35 min4 exercisesPremium

Take boxes out of the normal flow: badges pinned to a corner, overlays that cover a card, headers that stick while you scroll and bars fixed to the screen.

The skill
Place a box exactly where you want it: in the corner of a card, over it, or stuck to the edge of the screen.
You make
An album badge, a sticky tracklist heading and a video card with an overlay and a mini player.

Premium lesson

£7.99 a month or £59 a year. Cancel any time.

Builds on 18 Grid and responsive layouts. Free to try: Web Foundations and the playground.

Step 1 of 8
exercise_1.html

You've reached the good stuff.

4 exercises in this lesson, checked as you type. Premium opens every lesson after Foundations, in all four courses.

HTML, CSS and JavaScript