Positioning: Static, Relative, Absolute, Fixed & Sticky

The position property controls how an element sits relative to the normal document flow, and it's one of the trickiest CSS topics to get intuition for. static is the default for every element it just sits in normal document flow, and top/left/right/bottom properties do nothing on it. relative keeps an element in normal flow too, but now top/left/right/bottom CAN nudge it away from where it would normally sit, without affecting other elements around it. absolute removes an element from normal flow entirely it no longer takes up space, and other elements act like it isn't there then positions it relative to its nearest ANCESTOR that has position: relative (or absolute/fixed) set; if no ancestor has one, it positions relative to the whole page. fixed is similar to absolute, but always positions relative to the browser window itself, staying in place even when the page scrolls perfect for a sticky header. sticky is a hybrid: the element scrolls normally until it reaches a specified position (like top: 0), then 'sticks' there as the page keeps scrolling past it.