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

#198: About the Position Property

  • static: the default
  • relative: allows you to nudge around with top/right/bottom/left, making z-index work, gives you a positioning context
  • absolute: top/right/bottom/left moves the element to that exact position, otherwise the same as relative
  • fixed: like absolute, but scrolling the page doesn’t move the element
  • sticky: like fixed, but it doesn’t become fixed until the page is scrolled past your set
Read article “#198: About the Position Property”


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 “position”


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 “top / bottom / left / right”



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 “left”

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

Let’s talk about the position property. I know beginners are curious about this. Here’s a question I got recently:

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

Read article “Absolute, Relative, Fixed Positioning: How Do They Differ?”