Positioning

Last chapter explained how CSS boxes automatically grow, but also how you can control those dimensions (to some extent). Let’s now move on to the second important design decision: where to place these elements.

This chapter will explain how to do so per element. Often, though, positioning is about the distances between many elements. For that, we have other CSS concepts that the upcoming chapters will explain.

Position

As you’ve seen numerous times now, by default elements flow horizontally first, then vertically. Whenever you add a new element, it’s just placed right after the previous one. That’s how those CSS “boxes” slowly fill up the page.

The position property can change that. It can take these values.

• static: default option, explained above.
• fixed: the element is positioned relative to the browser window.
• relative: you can move the element relative to its original position.
• absolute: the element is positioned relative to its parent’s container box.

The relative value is used for small tweaks to an element’s position.

Why? Because the element visually moves, but behind the scenes it stays where it is. This means that other elements will flow around its original position, not where it ends up. In other words, the element’s original box is still part of the “page flow”.

Thus, moving an element too far (this way) creates a weird gap in the layout.

The absolute value gives absolute control over the placement. The element is removed from the page flow, so no gap is created. This, however, also means that it’s entirely your responsibility to place the element well.

Crucially, this positioning only works if its parent has relative positioning! Don’t ask me why. Just remember this whenever you’re confused about why it’s not working.

Finally, the fixed value is often used for those headers/menus that stay at the top of the page, even if you scroll down. The element is removed from page flow as well.

The position properties

But how do you change the position?

By adjusting the distance from the box to every edge: left, right, top or bottom. These take any number—and don’t forget the unit behind it.

Remember the differences between the position types.

• When fixed, the “edges” are the browser window.
• When absolute, the “edges” are the parent’s box.
• When relative, the “edges” are the original element’s position. (So bottom: 10px; means the bottom has a distance of 10px to the old position. In other words, the new position is 10px above where it used to be.)

Try it in the example above! Change the position type, then see what happens when you add different edges and distances.

Float

The position property moves the whole box around. Besides relative, which is uncommon anyway, they all remove the element from page flow.

But what if we want it to stay? What if we want to move it, yet use its correct location in the page flow? What if we want to move an element around, then let the other elements (usually text) wrap around it nicely?

Use the float property, which takes left or right. This moves an element all the way to the left or right edge of its container. Crucially, any other elements will nicely wrap around this new position. This is most commonly used for images with text around them.

In the example below, see how the image is moved around, yet the text respects its box.

Of course, you can also set the inverse. You can forbid any other elements to the left or right of the current element. For that, use the clear property, which takes left, right or both.

Z-Index

So far, we talked about positioning in the x-axis (horizontally) and the y-axis (vertically). But there is a third axis!

Imagine the z-axis as one that’s coming out of your screen (towards you). It determines the order in which elements are rendered. An element with a higher z-index is “further forward” and thus displays above other elements behind it.

Use the z-index property for this, which takes a number (with no unit).

By default, the z-index simply counts up from 0. So, the later an element appears on the page, the higher its default index will be. This is fine for most cases.

Elements with their position set get a bump to their z-index. (Because they’re taken out of the page flow, they are rendered later.)

Sometimes, however, elements overlap and you need to control which one displays on top. (Or, in some cases, the order in which your elements are laid out is not necessarily the order in which they are rendered on the page.)

You can invent your z-index values yourself! It is, however, recommended to stick to a few simple values (10, 50, 100), and to write them down somewhere in a design document. Nothing as frustrating as seventeen different z-index values floating around your stylesheet.

Beware! You can also set them to a negative number. This does what you expect (moves it backward), but it also disables any pointer interactivity: you can’t hover or click it anymore.

In the example below, play with the z-index property and see how that changes what’s displayed first (the image or the paragraph).

In Practice: Overlays

I’ll give another practical application of these properties, as I like to do.

On this website, you can click any image to see it at the full size. This is a common feature.

How does this work?

• I add a <div> to the HTML.
• But I position it absolutely. (So it doesn’t affect the rest of the page, and I can place it anywhere.)
• And I use a trick to make sure it fills the whole screen. I set the distance to all edges (left, right, top and bottom) … to zero!

Then I simply hide this overlay at the start (display:none;). Whenever you click an image, it shows itself by switching to display: block;. Then it loads the image you clicked inside. (This is all done with JavaScript.)

See the example below. Change the display property to show the overlay (it’s hidden now)—see how it fills the entire available space.