0
0
CSSmarkup~5 mins

Position fixed and sticky in CSS - Cheat Sheet & Quick Revision

Choose your learning style9 modes available
Recall & Review
beginner
What does position: fixed; do in CSS?

position: fixed; makes an element stay in the same place on the screen even when you scroll. It is fixed relative to the browser window.

Click to reveal answer
beginner
How does position: sticky; behave?

position: sticky; makes an element act like relative until you scroll past it, then it sticks to a position (like the top) and stays visible while scrolling.

Click to reveal answer
beginner
Which CSS property is required to make position: sticky; work?

You must set an offset like top, left, right, or bottom to tell the sticky element where to stick.

Click to reveal answer
beginner
Can position: fixed; elements move when you scroll the page?

No. Fixed elements stay in the same spot on the screen regardless of scrolling.

Click to reveal answer
beginner
What is a common use case for position: sticky;?

Sticky is often used for headers or menus that stay visible at the top as you scroll down a page.

Click to reveal answer
What happens to an element with position: fixed; when you scroll the page?
AIt stays in the same place on the screen
BIt scrolls with the page
CIt disappears
DIt moves randomly
Which property must you set for position: sticky; to work?
Az-index
Bopacity
Ctop, left, right, or bottom
Ddisplay
If you want a menu to stay visible at the top only after scrolling past it, which position should you use?
Asticky
Bfixed
Cstatic
Dabsolute
Which position type removes the element from the normal page flow and fixes it relative to the viewport?
Arelative
Bsticky
Cabsolute
Dfixed
Can position: sticky; work without setting any offset like top?
AYes, always
BNo, it needs an offset
COnly in some browsers
DOnly if <code>z-index</code> is set
Explain in your own words the difference between position: fixed; and position: sticky;.
Think about how each behaves when you scroll the page.
You got /4 concepts.
    Describe a real-life example where you would use position: sticky; on a website.
    Think about menus or headers that stay at the top as you scroll down.
    You got /4 concepts.