HTML & CSS Interview Question #82

What is the difference between position: fixed and position: sticky?

CSS Layout, Display, Positioning, Flexbox & Grid Mid-Level Intermediate

Quick Interview Answer

A fixed-positioned element is removed from normal flow and is commonly positioned relative to the viewport, so it remains in the same viewport location while the page scrolls.

Detailed Explanation

A fixed-positioned element is removed from normal flow and is commonly positioned relative to the viewport, so it remains in the same viewport location while the page scrolls.

A sticky element behaves like a relatively positioned element until a scrolling threshold is reached, after which it sticks within its relevant scroll container. Sticky positioning requires an inset such as top: 0 and can be affected by ancestor overflow and layout conditions.

Code Example

.support-button {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
}

.table-header {
    position: sticky;
    top: 0;
}