CSS: Position: Relative
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:
top:length
bottom:length
left:length
right:length
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 Property
CSS, Layout
- CSS: Display Property
- Pure CSS Table
- CSS: 3-Column Side-Panel Layout
- CSS: Newspaper Text-Flow Over Multi-Column Layout
- CSS: Text Flow Around Image
- CSS: Hide Element (visibility)
CSS, Layers
- CSS: Position Property
- CSS: Fix Element to Window
- CSS: Position: Relative
- CSS: Absolute Position
- CSS: Text Over Image
- CSS: z-index