Explain CSS Positioning Like I'm Five

#explainlikeimfive #webdev #beginners

Please explain how to position elements in CSS like I'm Five

Top comments (3)

Let's say we have students going into a classroom one at a time. The usual way for them to take a seat is this: The first student takes the first seat in the front row. The second student takes the next seat in the front row, and so on. Once the first row is full, the students fill up the second row in the same manner, and so on.

Static: static positioning is the "normal" or "default" positioning. If we've set up the rules for filling up the classroom as above, then a student who takes their seat by following these rules is using "static" positioning.

The naming used for static is not particularly inspired, since "static" usually implies that something never moves, which is not really the case. In css, static just means that an element takes its normal position.

Relative: The student takes a seat relative to the one they would have normally taken if they were using the default "static" rules. We could tell a student to move one row back relative to where they would normally sit: So if they'd normally sit in the middle of the 3rd row, they'd now sit in the middle of the 4th row instead.

With relative positioning, the change in positioning doesn't normally affect the layout of other elements. So using our example, the student who comes next would skip our relatively-positioned student's seat in the middle of the 3rd row even though it's empty and sit in the one next to it instead.

Fixed: We tell a student to take a particular seat in the room, regardless of where the other students are sitting. This would even make it possible for a student to sit right on top of another student!

Cases that don't fit very well with the classroom metaphor:

Absolute: This one is a bit tricky to explain using our classroom example. It's like fixed, except instead of positioning relative the the viewport (the classroom in our example), the element is positioned relative to the nearest "positioned" ancestor. "Positioned ancestor" means the first enclosing element who's position is set to something other than static. Maybe one way to look at it is like this: Let's say there is an area in the classroom with some computers. If we position a student in that computer area with absolute positioning, that means we have to check the immediate parent container, which in this case is the computer area. Is the computer area itself positioned with something besides static? If so, we will position the student relative to the computer area. If not, we go one level up and check whether that parent container (in our case, the classroom) has been positioned with something besides static, and so on.
Sticky: This one is also hard explain using our simple example, so I'll just say that's it's used in the context of scrolling. If you want your element to stay visible when it would normally get scrolled out of view, that's where you can use sticky.

learnlayout.com/position.html is a great reference for positioning and css layout more generally!