HTML and CSS Reference
In-Depth Information
Chapter 21
Positioning
The positioning properties can change how and where elements are displayed. They
enable very precise control over the web page layout.
position
Elements can be positioned in four different ways using the
position
property. An
element with the
position
property set to anything but
static
is known as a positioned
element.
position : static | relative | absolute | fixed
A positioned element can be moved with the
top
,
left
,
right
, and
bottom
properties,
which can be used to position elements anywhere on the page and also to resize them
horizontally and vertically. They allow both positive and negative length and percentage
values, with the percentage being relative to the dimensions of the containing block.
top | right | bottom | left (positioned) :
auto | <length> | <percentage>
static
By default, the
position
property has the value
static
. This value means that the
element appears in its regular position in the page flow and is not affected by the
top
,
left
,
right
, or
bottom
positioning properties.
/* Not positioned element */
.static { position: static; }
Because the
position
property is not inherited, and
static
is the default, there is no
need to explicitly set the
position
property to
static
.
