CSS: Relative Position

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.

Use position:relative to adjust a element's position relative to its normal position.

To specify the offset, use it together with:

• top:…
• bottom:…
• left:…
• right:…

Offset From Left

Here's a example.

Here's the CSS code for the middle line:

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

Offset From Top

Here's a example.

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

Back to CSS Position: static, relative, fixed, absolute