HTML and CSS Reference
In-Depth Information
position
is another property that affects the flow of a document. The values that can be used are
static
and
relative
, which affect the normal flow, and
fixed
and
absolute
, which take elements out of flow.
two new values,
center
and
page
, but unfortunately they are yet to be implemented into any browsers, so it is too
early to cover them.
You can use the
position
declaration in conjunction with the properties
top
,
right
,
bottom
, and
left
(ex-
cept for when using
position: static;
), which allow you to change the position of an element. How these
properties relate to the position of an element is determined based on the value of the
position
declaration.
You can give
top
,
right
,
bottom
, and
left
any type of value such as percentages, pixels, or ems.
static
Elements are
position: static;
by default. A static element is a normal box laid out in the normal flow. Stat-
ic elements aren't affected by the
top
,
right
,
bottom
, and
left
properties.
relative
When you make an element
position: relative;
, it too is laid out in the normal flow of a docu-
ment—known as the “normal position.” From its normal position, you can then offset the position of an element rel-
ative to its normal position using the
top
,
right
,
bottom
, and
left
properties. The elements following a relat-
ive element are affected based on the normal position of that element; its relative position doesn't affect layout.
Assume you would like to change the position of the
<h1>
page title on the Cool Shoes & Socks page. In Figure
9-10, you can see the page title is static and in flow, meaning the
<p>
elements and
<img>
below it are placed be-
low it.
If you give
<h1>
the declaration
position: relative;
, the page appears exactly the same as when that ele-
ment is
position: static;
. However, a relative element can be manipulated with
top
,
right
,
bottom,
and
left
.
