Blog Image

CSS Rabbit Hole

Week 3 of Phase 0 is wrapping up so I thought I'd reflect a little on the nightmare that is CSS. It seems relatively intuitive when starting. It makes sense. I have these elements in HTML and I want to add some styling. Easy enough, just throw a class into the HTML and add some properties to the stylesheet. All done!

Wait, that doesn't look right. I'll just open the dev tools to test out a few options and... three hours later, perfect!

It's a time suck like nothing else i've experienced. It doesn't tire or frustrate me necessarily. It just causes the clock to move really really fast.

To solidify some of these ideas, here's a quick recap of the different types of positionings:

  • Static Positioning: This is the default option. Each block level element is going to sit on top of the next one.
  • Relative Positioning: This is a way to move an element in relation to where it normally would have been with static positioning. You set the position to relative and then use the top, bottom, left, right properties to move the element.
  • Absolute Positioning: This property takes the element out of the normal flow. Other elements on the page no longer have any affect on this element.
  • Fixed Positioning: This is a type of absolute positioning that fixes the element in place in relation to the browser window. For instance, if you scroll down the page the element will stay in the exact same place.