∑ Home ◇ Math ◇ Computing ◇ Arts ◇ Words ◇ Literature ◇ Music ◆

CSS “position:relative” Example

Xah Lee, 2010-03-20, 2010-10-27

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 slightly different, according to any offset you've specified.

Solution

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