CSS Positioning

The CSS position property has four values that can be used to position elements on the page:

  • Static
  • Fixed
  • Absolute
  • Relative

Static is the default. I will use two boxes in a container with some paragraphs around between each box to demonstrate:

These are block elements with no position property assigned. Therefore, they’re positioned statically, and flow as usual in the document. What if I make the boxes fixed?

The boxes are stacked on top of one another. The reason there is some space between box 1 and 2 is the middle paragraph element; remove it, and the second box sits completely atop the first. The fixed elements are rendered where they would normally begin in the flow of the document as if they were static, but the content that follows continues to render:

If the position is absolute, not much appears to have changed from the position being set to fixed:

The difference between absolute and fixed positioning is that fixed elements will remain in the same spot even as the page scrolls (an often-used example is a navigation bar that “sticks” to the top of the page as your scroll). Both positions remove the element from the flow of the page and position it relative to the viewport (in this case, the browser window) on a coordinate plane. I can therefore set where on the page the boxes should go:

Finally, relative positioning renders the element as it would be if it were static, then adjusts the position of the element relative to itself. The below elements have a relative position. Without any top/right/bottom/left property on the selector, the boxes behave just like a statically-positioned element. However, if I add the left property and set its value to -10px, the elements shift 10 pixels to the left:

The space for the element remains between the paragraphs even though I can shift the elements quite far away from it:

These are the four currently-supported positioning properties for a CSS selector.

The CSS Box Model

The CSS box model represents the space taken up by an HTML element on a webpage. There are 4 components of the box model, which I like to remember with the acronym “MacBook Pro Computer”:

  • Margin
  • Border
  • Padding
  • Content

Every HTML element on a webpage can be thought of as a box, no matter how complex. Take a look the New York Times’ T Magazine webpage:

This row of article images/headlines is a box.

The area containing each article’s image and headline is a box.

You guessed it, this article title is a box too.

In the screenshots above, you’ll notice some different colors in the box. In the Chrome Developer Tools, blue is the content area, green is the padding, and orange is the margin. There aren’t any borders visible here, but they’d be colored yellow.

The CSS box model as the Chrome Developer Tools displays it.

Going from the inside to the edge of the box model, here’s a rundown of what each component of the box model does:

Content is just that, the main content: some text, an image, a video, or something else to display. By default (i.e., without applying the box-sizing CSS property), setting the width and height of an element will set only the width and height for the content box.

Padding is a way of extending the content area. In the example above, adding padding to the box class will “pad” the content, while extending the background color:

Now, the text (content) is padded from the edge by 10 pixels on each side.

Border is the component of the box model that comes after padding, and is self-explanatory. Let’s add a solid-line, black-colored border 3 pixels wide to the box:

There is now a problem in that I have defined the box as being 100px wide and 100px in height via the box class, but the actual width and height of the box is 122px (100px content + 10px padding on each side + 1px border on each side). This is because by default, the width and height properties only affect the content area. To ensure that the box is 100px on both sides, even with the padding and border, I’ll use the box-sizing CSS property.

Now, regardless of the padding and border, the box will be 100px square. The content area is 78px.

Finally, the Margin is the area that “pads” or separates elements that would otherwise touch the box. I’ll add some text just outside the box:

To make the text (or another element) appear a little further from the box, I can add the margin property:

The text is now shifted away from the box due to the margin:

15 years in the making: the origins of my career in web development

I wish I could tell you the first time I actually programmed a computer. When I was a child, I created a library in my bedroom and “loaned” books to my siblings, using Excel on an old Windows machine to keep track of who loaned what and how many days were left until it was due. Many computer programmers will tell you this doesn’t count as programming, and surely I was no child prodigy. Nonetheless, Excel provides an interface to interact with and manipulate data, and I used a formula to calculate due dates and fines. And honestly, what kind of 10 year old uses Excel to track borrowed books to their siblings?

A few years later, when I was in the seventh grade, my parents purchased a family computer for Christmas. I had been aggressively hinting at a Mac (think: laminated printouts of the tech specs from Apple’s website), and at long last, we had one – an eMac. Rather, I had one, as I monopolized the machine the one hour per day my mother allowed us to use it (on a dial-up connection, no less).

eMac computer from Apple

Remember the eMac? (Image: Chicago Architecture).

In need of a way to justify using the computer more, I eventually found a way to convince my parents. My father owns a custom closet company in southeastern Wisconsin, and his website was, well, very 2003. This being the early/mid 2000s, Flash was how “cool” websites were powered. My interest budding, my mother bought me a book at Barnes & Noble to help me learn Macromedia Flash MX 2004. Continue…