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