CSS: Position: Relative

By Xah Lee. Date: . Last updated: .

The position:relative is best used when you want to adjust some element's position slightly. The “relative” means it is relative to a element's normal position.

To specify the offset, use it together with:

Offset From Left

Here is a example.

Once upon a time …

I'M OFFSET FROM LEFT BY 10px!

They lived happily ever after.

Here is the CSS code for the middle line:

div.offSetMe {position:relative; left:10px;}

Offset From Top

Here is a example.

Once upon a time …

I'M OFFSET FROM TOP BY 10px!

They lived happily ever after.

Here is the CSS code for the middle line:

div.offSetMe {position:relative; top:10px;}

You can also use bottom, or right, to specify offset.

You should not use top and bottom together. If you do, the top overrides the bottom. Similarly, you should not use left and right together. The left overrides right.

Back to CSS: Position Property

CSS Layout

CSS Layers

JavaScript Using Css Layers