HTML and CSS Reference
Table 11-1. Properties Used for CSS Positioning
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.
Specifies the top offset of a positioned element. A positive value moves
the element down. A negative value moves it up.
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.
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.
Specifies the bottom offset of a positioned element. A positive value
moves the element up. A negative value moves it down.
Sets the stacking order of positioned elements. If elements are in the same
stacking context, ones with a higher z-index appear in front.
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.
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.