Put in an awkward position
January 14, 2016
I have been coding for: 3 weeks
Starting off this week's post with a semi-offensive CSS pun:
Learning how to style things on a page with CSS for the first time was tough. I felt like I was drowning at times (see above). I spoke with a few DBC grads about learning CSS and they responded with a resounding "UGH, I'm horrible at CSS." This was a little demoralizing, but I decided to push through and frustrate myself until I learned a few of the nuances. One of my most valiant efforts was trying to figure out positioning. The position property determines how and where something is positioned on the page.
I learned there are four types of positioning: static, fixed, relative, and absolute. I started to differentiate these by figuring out which positions respond to changing the top, bottom, left, or right properties. Static does not respond, but the other three do. Static is the default. A static position is just where something is positioned naturally, or what the browser displays according to the HTML code. Relative differs from static in that you can adjust it with those top, bottom, left, and right properties. All of these adjustments move the item relative to its natural, or static, placement.
Absolute and fixed get trickier. Both of these are positions that are relative to other things on the page. Absolute relies on the closest non-static parent element. If there's no positioned parent, the item will just move relative to the entire document (just like normal relative positioning!). So, if you set a value for how much this will move to the left, it will move that far to the left relative to its parent element. Things that are absolutely positioned will still scroll with the page. Finally, fixed position is something set in a specific place relative to the browser window, called the viewport. When a user scrolls up and down on their broswer, this thing will not budge. Think of the search/menu bars at the top of the Facebook and Twitter websites: when you scroll, these bars remain in place at the top of the screen.
Wordy explanations like the ones above just simply won't make sense until you try it out for yourself. Experiment using DevTools to see how adjustments to an item's position affect it's placement. I promise you'll catch a glimmer of clarity on these concepts as you pop items in, out, and around your page!