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 |