Please explain how to position elements in CSS like I'm Five
For further actions, you may consider blocking this person and/or reporting abuse
Please explain how to position elements in CSS like I'm Five
For further actions, you may consider blocking this person and/or reporting abuse
Sudhi Ranjan Gupta -
Mike Young -
Mike Young -
Mike Young -
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.
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 thanstatic
. 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 withabsolute
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 besidesstatic
? 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 besidesstatic
, 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!
Thank you so much! Well understood!
what a great explanation!