CSS: Relative Position

By Xah Lee. Date: . Last updated: .

This page show you how to use the position:relative in CSS.

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.

Offset From Left

Here's a example.

Once upon a time …

I'M OFFSET FROM LEFT BY 10px!

They lived happily ever after.

Here's the CSS code for the middle line:

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

Offset From Top

Here's a example.

Once upon a time …

I'M OFFSET FROM TOP BY 10px!

They lived happily ever after.

Here's 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.

Reference

Visual formatting model#relative-positioning

Like what you read? Buy JavaScript in Depth