css · level 2 · unit 5 · lesson 1
- meet it
- guess first
- your turn
- fix it
- nailed it
Tap a green word if you get lost.
meet it
nudges a box from its normal spot.
is how boxes are laid out unless you say otherwise: blocks stack, inline boxes sit in lines. Every element starts with position: static, which means it follows the flow.
position: relative lets you nudge a box with an : top, right, bottom or left. top: 10px pushes it 10px away from the top of where it was, so it moves down.
The space it left behind stays empty, and nothing else on the page moves. So a nudge can make boxes overlap.
<p>Fresh bread</p>
<p class="sticker">Half price!</p>
<p>Baked this morning</p>.sticker {
position: relative;
top: -8px;
left: 12px;
padding: 8px;
background-color: yellow;
}Press show my page to see it here.
A negative offset moves the other way: top: -8px lifts the sticker up.
guess first
left: 20px. Which way does the box move?
Guess before you run it. Wrong guesses are how you learn, and nothing is marked.
<p class="box">Over here!</p>.box {
position: relative;
left: 20px;
background-color: lightpink;
}your turn
Your turn. Lift the badge.
Make the badge relative, then nudge it up by 6px using top.
the page you’re styling
<h2>Lemon cake <span class="badge">New</span></h2>your css
Press show my page to see it here.
- the badge is relativenot checked yet
- the badge moves up 6pxnot checked yet
fix it
The offset does nothing. Fix it!
the page you’re styling
<p>Our opening times</p>
<p class="note">Closed on Mondays</p>your css
Press show my page to see it here.
- the note is relativenot checked yet
- the note moves down 20pxnot checked yet
- Offsets only work on some boxes. Which position does this one have?
- Every box starts as
static, and static boxes ignoretop. - Add
position: relative;to the rule, then press run.
nailed it
you nudged a box out of line. :D
- Every box starts
static, following the normal flow. position: relativeplus an offset nudges a box.- The space it left behind stays empty.
new words in your collection
- normal flow
- position
- offset
This lesson isn’t saved. A free account remembers every lesson you finish.