That’s a great question! Understanding CSS positioning was one of those pivotal moments for me. It seems to trip a lot of people up, and once you get it, you’ll find lot’s of uses for them.
This subject has been covered many times and I found positioning 101 by A List Apart to be super helpful.
I’m going to go over a key relationship in CSS positioning that might help solve some head scratchers. The infamous relative and absolute positioning. By default elements are positioned static. Once you declare an element as absolute, it will position itself to the browser window.
Check this out!
So as you can see in the image above, positioning the div absolute pushes it to the browser window or the body element (base of the tree).
Now, here is the important part… If you want to have full control over an element inside of another, you would likely use the relative and absolute positioning relationship.
Check this out!
Now you can see that if the parent div is declared as relative the child elements can be positioned absolute inside.
One example is you would use this to position a close modal box icon in the top right or left.
Quick Notes
- Elements are by default positioned static
- Positiong an element as relative allows you to nudge it around with left right/ top bottom declarations
- Positioning an element absolute by itself will set that to the browser window or body element (base of the tree)
- You must set an element :relative to position other elements :absolute inside of it (see second image)
