CSS positioning can be one of the hardest concepts to get your head around when learning to code. All the new terms you need to learn can be daunting to the novice, like myself. I’ve used my expert illustration skills to create the following visual explanation of CSS Positioning. Because sharing is caring.
As the figures illustrate above, CSS elements are position:static by default. If an element is given position:absolute, they loose their default position and can then be placed on top of any other elements on the page (think of a pop up that covers something else on screen). You can use a positioning property of top, bottom, left and right to tell it where on the screen to go. Position:relative assists in controlling absolute elements. Absolutes look to relative parents for their top, bottom, left and right positioning. Relative elements can also be moved around the screen using the 4 positioning properties, but they still occupy their default space. I’ve seen this used on pages with paragraphs of text when, say, the second paragraph is indented differently from the first. Position:relative allows us to nudge elements around the page, while keeping them in line with their siblings. Mozilla has a great example of what absolute and relative positioning looks like on a page. Position:fixed stays in place when you scroll. This positioning is a really great effect to put on navigations you want to stay visible to the user when scrolling through your site. Check out the navigation bar on my site for an example of position:fixed. After I got my head around this a little bit, I found the DocHub article on positioning pretty helpful for solidifying what I knew.
Do you have any other examples of cool effects achieved by positioning? If you have anything to add please let me know in the comments!
vanessamerritt 
Love it
nailed it !