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: static, relative, fixed, absolute

CSS Layers

JS in Depth
XAH  BUY NOW

CSS

Basics

Color

Font

Text Decoration

Box Model

Box Decoration

Layout

Layers

Transform/Animation

Line Wrap

Misc