Positioning: Fixed positioning

Like with absolute positioning, when an element is assigned position: fixed it’s removed from the flow of the page.

The difference with absolute positioning is this: elements are now always positioned relative to the window, instead of the first non-static container.

.box {
  position: fixed;
}

.box {
  position: fixed;
  top: 0;
  left: 0;
}

Another big difference is that elements are not affected by scrolling. Once you put a sticky element somewhere, scrolling the page does not remove it from the visible part of the page.

Lessons in this unit:

0: Introduction
1: Relative positioning
2: Absolute positioning
3: ▶︎ Fixed positioning
4: Sticky positioning