Web Platform CSS

Positioning

Positioning elements in CSS is a very common desire. In general, you shouldn't need to position items manually, setting precise coordinates. This approach can be brittle as screens come in different sizes, and content can change. Rather, aim to use CSS's layout capabilities to get items to appear where you want them. Read on if you really need to position items manually.

You define how an element should be positioned using the position CSS property. Most likely, you'll then want to pick as values either: static, relative, absolute or fixed.

Once you pick a method for positioning, you need to specify its coordinates, or coordinate offsets. You can choose to use top (or bottom), left (or right). The meaning of these depends a bit on the positioning method - sometimes they will refer to the element you're positioning, sometimes to the parent, sometimes to the viewport.

When choosing how you position, you tend to want an adaptive, responsive approach considering that font size and screen sizes will be variable.

static

static is the default way elements are positioned, based on where they appear in the document tree.

.important {
  position: static;
}

Any coordinates you specify are ignored, because the browser handles the layout automatically. (You probably wouldn't purposefully use this value because it is the default.)

relative

relative allows you to set offsets from an element's natural position. In effect, you can use relative to nudge an element up, down, left or right, or some combination thereof.

.important {
  position: relative;
  left: -1em;
  top: 1em;
}

In the above snippet, we are asking that the left edge of the element should be moved negatively - that is, to the left - by 1em, and that the top edge of the element should be moved by 1em (downwards). This nudging is relative to position the element's default position in the flow of the document.

absolute

absolute removes the element from the layout (altering how other elements appear) and sets precisely where it should appear, relative to its parent (or whatever parent it has which has a position).

.important {
  position: absolute;
  right: 1em;
  bottom: 0em;
}

In the above snippet, we set the right edge of the element to be at 1em (according the its parent's coordinate space), and set the bottom edge of the element to be at 0em (at the base line of the parent).

Because this removes the element from the layout, there won't be a gap left behind, and other elements will be laid out as if it doesn't exist.

fixed

fixed works a bit like absolute, but the coordinates relate to the viewport. This can be useful if you want to 'break out' of a parent element.

.important {
  position: fixed;
  left: 0;
  top: 0;
}

The above snippet will fix an element to the top-left corner of the screen.

To fix an element at the bottom-left corner of the screen, we could use bottom: 0 instead of top: 0.

Because this removes the element from the layout, there won't be a gap left behind and other elements will be laid out as if it doesn't exist.

Read more

Guides to positioning from CSS Reference, CSS Tricks and Mozilla.