CSS 「position:relative」 Example

Xah Lee, 2010-03-20, …, 2013-03-17

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 the parent tag's rendering box.

When you use “relative”, the tag still occupies space in the normal flow, but its position is offset by a distance that you can specify.

Offset From Left

Here's a example.

In the above box, you can see the middle line is offset from left by 5 ex. (ex is the width of letter “x”)

Here's the CSS code for the middle line:

div.offSetMe {position:relative; left:5ex;}

Offset From Top

Here's a example.

Here's the CSS code for the middle line:

div.offSetMe {position:relative; top:2ex;}

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