Positioning Elements Precisely - Beginning CSS3 - page 228

Table 11-1. Properties Used for CSS Positioning

Property Initial Value Description

position static Controls how an element is positioned. When set to absolute or

fixed , the element is removed completely from the normal flow of the
document. When set to relative , the element is moved relative to its
position in the normal flow, but a space is left where it would normally
have been. The default value, static , means the element remains in the
normal flow and is not positioned.

top auto Specifies the top offset of a positioned element. A positive value moves

the element down. A negative value moves it up.

left auto Specifies the left offset of a positioned element. A positive value moves the

element to the right. A negative value moves it to the left.

right auto Specifies the right offset of a positioned element. A positive value moves

the element to the left. A negative value moves it to the right.

bottom auto Specifies the bottom offset of a positioned element. A positive value

moves the element up. A negative value moves it down.

z-index auto

Sets the stacking order of positioned elements. If elements are in the same
stacking context, ones with a higher z-index appear in front.

clip auto Defines the area of an absolutely positioned element that remains visible.

■ The W3C's Css mobile Profile, which was drawn up before the rapid spread of smartphones and
tablets, lists all the properties in Table 11-1 as being optional on a mobile device. most smartphones and tablets do
support Css positioning, but you cannot rely on it completely when designing for mobile devices.

Caution

Understanding the Different Types of Positioning
The position property requires one of the following values:
absolute This removes the element, including any child elements, completely from
the flow of the document, and positions it at the specified offsets. If the element is
nested inside another positioned element, the offsets are calculated with reference to
the positioned parent. Otherwise, the offsets are calculated with reference to the page.

fixed This is similar to absolute , but the offsets are always calculated with reference
to the browser viewport.

relative This moves the element relative to its normal position in the document flow,
but without affecting the position of other elements.
static This leaves the element in the normal document flow.
The position property is not inherited, so you can use the inherit keyword if you want a child element to
inherit the same type of positioning as its parent.