Position fixed and sticky

Learn position: fixed and sticky values.

Pin to the window with position: fixed

position: fixed takes an element out of the flow and pins it relative to the browser window (viewport). Even when the page scrolls, the element stays put. top, right, bottom, left place it against the window edges.

This value is mostly used for fixed headers and back-to-top buttons. When the visitor scrolls down, these elements stay visible.

Stick past a threshold with position: sticky

position: sticky is a hybrid value. It first behaves as in normal flow; but once scroll crosses a set threshold, it starts acting like fixed and sticks to the given position.

For example, with top: 0 and position: sticky, the element starts in its normal spot; as the user scrolls down, it sticks to the top edge and stays there. This is ideal for section headings and sidebars.

When to use which?

If a header must always be visible and not scroll away, pick position: fixed. The element leaves the flow; the content below it must add top margin to avoid slipping under the header.

If a section heading should start in its normal spot and only stick during scroll, use position: sticky. The element stays in flow; no extra spacing is needed.

Exercise Pin the header

Write a header.site class selector and assign three declarations: position: fixed, top: 0, left: 0. The header will then be pinned to the top-left corner of the browser window.

Show example solution

/* pin the header */
header.site {
  position: fixed;
  top: 0;
  left: 0;
}

Test yourself

Which scenario fits position: fixed?
- Paragraph text splits into two columns
- Header stays put during scroll
- List markers change shape
- Link color marks as visited
Show answer

Header stays put during scroll — Correct. fixed is ideal for headers and buttons that must stay visible during scroll.

Make the sidebar sticky

.sidebar {
  ____;
  top: 0;
}

Show answer

.sidebar {
  position: sticky;
  top: 0;
}

Match each value to its meaning

fixed

Pinned to viewport
sticky

Sticks past threshold
absolute

Relative to container

Next lesson: Summary - Header layout

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies