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

About

The Offset CSS Properties of a box are

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

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

  • relative
  • absolute
  • fixed.

Effect

Offset Moves the boxes to the … from the containing box
left right
right left
top bottom
bottom top

Example

Moving a word up

.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:

Powered by ComboStrap