Skip to main content

The position Property

Position is a CSS property just like color or background, etc. It can be given one of 5 values: static, relative, absolute, fixed, or inherit. You will probably never use position: inherit;. Elements default to position: static;, meaning most likely you will not have to specify it.

Static​

Elements will be left according to the Document Flow covered in the last lesson. Nothing more to see here.

Relative​

Relatively positioned elements behave like statically positioned ones, except (!!!) They can take 4 additional CSS properties: top, bottom, left, right.

These properties take a distance value (px, em, in), and dictate where the element should be relative to where it would normally fall.

Here are some pups:

three dog images

Here, I have moved the second image to the left with the following CSS:

.img-2 {
  position: relative;
  left: 100px;
}

Note: While the content obviously shifts, a relatively positioned element still takes up it's normal space in the document flow (i.e. the third image did not offset when the second one moved.)

three dogs, left image offset

Absolute​

These elements take the same top, bottom, left, right CSS properties, but the values are now relative to the top left corner of the its nearest relatively positioned parent (usually a div or an element similar).

Note: Absolute position elements ARE removed from norsmal document flow, and other element will fill the space the absolute element would have taken up.

Here, I have moved the second image 200px down and 200px right from the top left corner of the document. Notice that top and left refer to the left-most and top-most edges of the element:

.img-2 {
  position: absolute;
  left: 100px;
  top: 100px;
}

dog images in triangle shape

Fixed​

Elements with fixed position remain at a certain place in the window no matter where a user scrolls in the browser.

Like absolute elements, these elements are removed from the normal flow. The top, bottom, left, right CSS properties are relative to the top left corner of the viewable window.

.img-2 {
  position: fixed;
  left: 100px;
  top: 100px;
}

dog images in triangle shape

If you'd like more on position, check out this tutorial. When you have time, I recommend going through the full, learn layout tutorial as well.

For now, onto Flexbox!