CSS · Exercise 5 of 5 Previous
Intermediate
Build an inbox with a sticky toolbar
This small inbox scrolls inside .app. Finish its layout with positioning:
- the .toolbar must stay at the top of .app while the messages scroll, and stay above everything that scrolls under it, including the note card;
- the note's .close button must sit in the top-right corner of the note, at most 12px from its top and right edges;
- the .fab ("back to top") button must stay in the bottom-right corner of the window, at most 24px from the right and bottom edges, whatever scrolls.
What Check tests
- The toolbar sticks to the top of the inbox while it scrolls
- The toolbar has a background, so messages don't show through
- The stuck toolbar stays above the note scrolling under it
- The close button is in the note's top-right corner
- The back-to-top button is fixed in the window's bottom-right corner
Stuck? One hint at a time
The solution unlocks after your first Check. Try first: that is where the learning happens.
Runs in your browser. Your code is saved here.
Your page
Press Run to see the page.
Console
Nothing logged yet.