I’ve been frustrated every time I try to grasp CSS for years. “I just want this on the left and this to be over here!” etc. Now I realize that CSS doesn’t work that way for very good reasons. In most programming, we give instructions for what we want to happen. But in CSS, it’s more like we are describing a situation — relationships — and then letting the browser figure it out. That’s because the browser has to handle many different circumstances. Resolutions, interfaces, font sizes. I describe how the parts go together, it figures out how to put them on the screen.
When I get upset about the properties for one part being dependent on the properties of its parent containers and siblings, it’s OK Jess: remember that CSS is about interrelationships, so this is normal.
Having got that, I’m now able to learn about how to put things on the screen without yelling in frustration and confusion.
So far, I’ve looked up the position property and learned that it doesn’t do much. There are other ones like display that seem more important. But meanwhile here’s my executive summary:
The position property determines two things: whether the element participates in document flow, and what the properties top bottom left right do. These are the useful ones:
position: static – the default. Stay in document flow; top bottom left right do nothing.
position: relative – nudge. Stay in document flow. top bottom left right nudge the element in that direction from where it would have been. This also has some effect on child element positioning, at least in the case of ::before pseudo-elements (weird CSS tricks).
position: absolute – override. Remove the element from document flow. top bottom left right tell it where exactly where to be within the document (or within the next absolutely-positioned element up the tree).
position: fixed – override and hold weirdly still. Remove the element from document flow
tell it exactly where to be within the viewport. That means within the browser window (or the iframe if it’s in one). When the page scrolls, this element stays in the same place. People use this for menus.
Please lmk if you have corrections.