If you don’t specify an element’s positioning type, it defaults to
static. This just means “where the element would normally go.” If you don’t tell an element how to position itself, it just plunks itself down in the document.
The first type of positioning is absolute positioning. When an element is set to
position: absolute, it’s then positioned in relation to the first parent element it has that doesn’t have
position: static. If there’s no such element, the element with
position: absolute gets positioned relative to
Relative positioning is more straightforward: it tells the element to move relative to where it would have landed if it just had the default
If you give an element relative positioning and tell it to have a
10px, it doesn’t move down ten pixels from any particular thing—it moves down ten pixels from where it otherwise would have been.
fixed positioning anchors an element to the browser window—you can think of it as gluing the element to the screen. If you scroll up and down, the fixed element stays put even as other elements scroll past.