HTML and CSS design and build websites

Relative Positioning Article
position:relative
HTML
chapter-15/position-relative.html
The Evolution of the Bicycle
In 1817 Baron von Drais invented a walking
machine that would help him get around the
royal gardens faster...
CSS
p.example {
position: relative;
top: 10px;
left: 100px;}
Result
Relative positioning moves an
element in relation to where it
would have been in normal flow.
For example, you can move it 10
pixels lower than it would have
been in normal flow or 20% to
the right.
You can indicate that an element
should be relatively positioned
using the position property
with a value of relative.
You then use the offset
properties (top or bottom and
left or right) to indicate how
far to move the element from
where it would have been in
normal flow.
To move the box up or down,
you can use either the top or
bottom properties.
To move the box horizontally,
you can use either the left or
right properties.
The values of the box offset
properties are usually given in
pixels, percentages or ems.
LAYOUT
366