css · level 2 · unit 5 · lesson 4
- meet it
- guess first
- your turn
- fix it
- nailed it
Tap a green word if you get lost.
meet it
pins a box to the screen itself.
position: fixed places a box against the viewport, not the page. Scroll as far as you like and a fixed help button stays in its corner.
Like absolute, it leaves the normal flow. Unlike absolute, a positioned parent does not hold it: it measures from the edges of the screen.
When boxes overlap, picks who is in front. It is a plain number, and higher numbers sit closer to you. It needs a positioned box: on a plain static block, it does nothing.
<p class="long">A very long page about hedgehogs.</p>
<button class="help">Help</button>.help {
position: fixed;
right: 16px;
bottom: 16px;
z-index: 10;
padding: 12px 20px;
border-radius: 24px;
color: white;
background-color: teal;
}
.long {
height: 900px;
}Press show my page to see it here.
Scroll inside the preview: the Help button never moves.
guess first
Two boxes overlap. Which one is in front?
Guess before you run it. Wrong guesses are how you learn, and nothing is marked.
<div class="box red"></div>
<div class="box blue"></div>.box {
position: absolute;
width: 80px;
height: 80px;
}
.red {
z-index: 2;
background-color: red;
}
.blue {
top: 40px;
left: 40px;
background-color: blue;
}your turn
Your turn. Pin the basket button.
Fix the basket button to the screen, 20px from the bottom and 20px from the right.
the page you’re styling
<p class="shop">Apples, pears, plums and a lot more fruit.</p>
<button class="basket">Basket</button>your css
Press show my page to see it here.
- the button is fixed to the screennot checked yet
- it sits 20px from the bottomnot checked yet
- it sits 20px from the rightnot checked yet
fix it
The sale banner hides behind the photo. Fix it!
the page you’re styling
<img class="photo" src="tree.svg" alt="An apple tree">
<p class="banner">Apple trees half price</p>your css
Press show my page to see it here.
- the banner is positionednot checked yet
- the banner keeps its
z-indexnot checked yet
- The banner has a
z-index, yet it does nothing. Why might that be? z-indexneeds a positioned box, and the banner is stillstatic.- Add
position: relative;to.banner, then press run.
nailed it
you pinned a box to the screen. :D
position: fixedpins a box to the viewport.- A higher
z-indexsits in front. z-indexneeds a positioned box.
new words in your collection
- fixed
- z-index
This lesson isn’t saved. A free account remembers every lesson you finish.