CSS `position` in a Nutshell

Newcomer to CSS would find themselves having trouble understanding about CSS position property. They would be confused on what to use, is it absolute, or fixed, or static, or relative?

Position is related with the top, left, right, bottom property. So unless you want to modify those properties, you don’t have to use or change the position property. Let’s refer to those top, left, right, and bottom properties as offset.

Static

Static is just static, you can not move it. Setting the values of the offset does not do anything. This is the default value of the position property.

Fixed

Fixed properties means it will always stay at the specified offset. If you put an element as:

.box{  
  position: fixed;  
  left: 100px;  
  top: 100px;  
}

It will always be placed 100px from the left, and 100px from the top. The offset is calculated from the browser view port.

When you scroll the page, it will always stay at that position. That’s why its called fixed. (See medium navigation bar, it is fixed, that is why it always stay at top no matter how far you scroll).

#### Relative

Relative means the offset is calculated relative to the object current position. So if you have three buttons as below.

Setting the second button CSS as below:

.second-button{  
  position: relative;  
  top: 50px;  
  left: 25px;  
}

Will results as follow:

The second button position is changed from its original position by 50px horizontally, and 25px vertically.

Absolute

Absolute calculate the offsets from its first non-static parent (I know, just keep reading).

With a CSS looks like below:

.gray-box{  
  position: relative;  
  top: 90px;  
  left: 90px;  
}

.blue-box{  
  position: absolute;  
  top: 25px;  
  left: 25px;  
}

The blue box position is calculated from the parent position.

As long as the parent is positioned as non-static (fixed, absolute, relative), the element with position set as absolute will calculate its offset from the parent.

So if you set the CSS as:

.blue-box{  
  right: 25px;  
  top: 25px;  
  position: absolute;  
}

The result will be as follows, the right and top offset is calculated from its parent (the gray box).

### Conclusion

Just keep practicing and experiment with it so you get a better grasp on CSS positioning.

Here is a summary on each position properties.

• Fixed: Offset from view port, not affected by scroll.
• Relative: Offset from current position.
• Absolute: Offset from non-static parent.
• Static: Just static.