HTML & CSS · 14-day planAll days
Add the finishing touches. Position elements with relative, absolute, fixed and sticky, layer them with z-index, animate changes with transitions and transforms, and make pages that everyone can use, with visible focus, enough contrast, real buttons and respect for reduced motion.
By the end of today you can
- Position elements with relative, absolute, fixed and sticky
- Layer overlapping elements with z-index
- Animate hover and focus states with transitions and transforms
- Keep keyboard focus visible and colours readable
- Apply an accessibility checklist to a page
Your pages have structure, style and layout. Today: the finishing touches that make a site feel polished, and the habits that make it work for everyone, including people using keyboards, screen readers or zoom.
Positioning
| position | Placed relative to | Takes up space? |
|---|---|---|
static (default) | Normal flow | Yes |
relative | Where it would normally be | Yes (its original spot) |
absolute | Nearest positioned ancestor | No |
fixed | The browser window | No |
sticky | Normal, until it hits an edge while scrolling | Yes |
Then use top, right, bottom, left to move it. The pattern parent relative, child absolute places badges, icons and labels in corners.
Sticky headers and z-index
z-index decides which positioned element is on top when they overlap: higher wins.
Transitions and transforms
transition: when a property changes, animate it over a duration (0.2s) with an easing (ease).transform: move (translate), resize (scale), turn (rotate) without disturbing the layout. Transforms are smooth and cheap to animate.- Keep UI animations short: about 150–300ms.
Some people get dizzy from motion. Respect their setting:
@media (prefers-reduced-motion: reduce) {
* { transition: none !important; animation: none !important; }
}Accessibility: pages for everyone
Accessibility (often written a11y) means people can use your site whatever their abilities or devices: with a keyboard only, a screen reader, zoomed text or poor eyesight. It's also good for SEO and often required by law.
Visible focus
Press Tab in the preview to move between links and buttons:
Keyboard users rely on the focus outline to see where they are. Never remove it without a replacement; style it with :focus-visible, which shows it for keyboard users but not on mouse clicks.
Contrast
Aim for a contrast ratio of at least 4.5:1 for normal text (3:1 for large text). DevTools and free online checkers measure it.
Accessibility checklist
| Check | Using |
|---|---|
Clear outline: one h1, headings in order | Day 2 |
Landmarks: header, nav, main, footer | Day 4 |
Good alt text (or alt="" for decoration) | Day 3 |
A <label> for every input | Day 5 |
<button> to do things, <a href> to go places | Today |
| Everything works with Tab and Enter, with visible focus | Today |
| Contrast ≥ 4.5:1; colour isn't the only signal | Today |
Text in rem, so it zooms | Day 9 |
lang on <html> | Day 1 |
Try using your own site with only the keyboard for a minute. It's eye-opening.
Recap
- Position:
relative(nudge, and a reference point),absolute(in a positioned parent),fixed(to the window),sticky(sticks while scrolling);z-indexfor stacking. - Transitions + transforms for smooth, short animations; respect reduced motion.
- Accessibility: visible focus, enough contrast, real buttons and links, labels, alt text and a heading outline.
Tomorrow: the project, your own personal page, built and published.
Knowledge check
Test what you learned
5 questions · pick an answer to see if you're right
- 1
An element has position: absolute; top: 0; right: 0;. What is it positioned relative to?
- 2
What does position: sticky; top: 0; do to a header?
- 3
Why should you never remove the focus outline (outline: none) without replacing it?
- 4
What does transition: background-color 0.2s ease; do?
- 5
Which is the accessible way to make something clickable that performs an action?
Was this lesson helpful?
Need a breather? Take a two-minute break