Hybrid Behavior

position: sticky is when an element behaves like relative until we scroll to it, and turns into fixed when it touches the edge.

Three Iron Rules of Sticky:

1. Coordinate is mandatory: Need to specify at least one property (e.g., top: 0), otherwise it won't " stick " .
2. Height is needed: The element's parent must be taller than the sticky block itself. The sticky block " rides " inside the parent, and if the parent ends — the block will move away with it.
3. Sticky Killer: If ANY parent up the tree has overflow: hidden, overflow: auto, or overflow: scroll, stickiness stops working.