CSS - Position - Offset Properties (Left, Right, Top, Bottom)

About

The Offset CSS Properties of a box are

• top,
• left,
• right,
• bottom

They are applied to the containing box in the following positioning model in order to position a box.

• relative
• absolute
• or fixed

They are used then only when the box has one of the following position value:

• relative
• absolute
• fixed.

Effect

Example

Moving a word up

• The CSS rule that will move all element with the class up thanks to:
  • position: relative (ie relative positioning)
  • and the bottom property of 10px

.up {
  position:relative;
  bottom:10px;
}

• The HTML with a span element to apply the up class to words and will then offset them from 10px towards the top.

An example on how to move a words <span class="up">Up 10 pixels</span>

• Result: