Skip to main content
CSS is fun and cool and I like it.
Almanac

position

The position property can help you manipulate the location of an element, for example:

.element {
  position: relative;
  top: 20px;
}

Relative to its original position the element above will now be nudged down from the top by 20px. If we were to animate these properties we can see just how much control this gives us (although this isn’t a good idea for performance reasons):

See the Pen fcdf9b19b6bed8da6af791d7433116b0 by CSS-Tricks (@css-tricks) on CodePen.

relative is only … Read article

Almanac

top / bottom / left / right

The top, bottom, left, and right properties are used with position to set the placement of an element. They only have an effect on positioned elements, which are elements with the position property set to anything other than static. For example: relative, absolute, fixed, or sticky.

div {
  <top || bottom || left || right>: <length> || <percentage> || auto || inherit;
}

You might use it, for example, to nudge an … Read article

Almanac

left

The left property in CSS goes hand in hand with positioning. By default, elements are static positioned in which the left property has no effect whatsoever. But when the positioning of an element is relative, absolute, or fixed, the left value plays a big role.

div {
  left: value (px, em, %, pt, etc) || auto || inherit;   /* can be negative */
}
Read article
Article

Absolute, Relative, Fixed Positioning: How Do They Differ?

A user asked in the forums:

I am fairly new to web design, and I could never master the differences in positioning of elements. I know there are absolute, fixed, and relative. Are there any others? Also, do they majorly differ? And when should you use which?

Short answer: Yes, there is one more, "static", which is the default. Yes, they majorly differ. Each of them is incredibly useful and which you should use of course depends on the desired … Read article