CHAPTER 7 ■ POSITIONING MODELSPositioned
Problem You want to turn an element into a positioned element so that its descendants can be
positioned relative to it. You may also want to offset the element from its current
location, its nearest positioned ancestor, or the viewport; move the element into its own
layer; remove the element from the flow; or change the stacking order of the element to
control when it overlaps other elements or is overlapped.
Solution You can use position:static to unposition an element so that it’s rendered normally in
the flow. static is the default value for position. You can use position:relative to
position an element at an offset from its location in the normal flow. You can use
position:absolute to position an element at an offset from its location in the normal
flow or from its nearest positioned ancestor. You can use position:fixed to position an
element at an offset from the viewport.
You can use left to offset the left side of an element from the left side of its reference
position. Positive values offset to the right and negative to the left. You can use right to
offset the right side of an element from the right side of its reference position. Positive
values offset to the left and negative to the right. You can use top to offset the top of an
element from the top of its reference position. Positive values offset down and negative
offset up. You can use bottom to offset the bottom of an element from the bottom of its
reference position. Positive values offset up and negative offset down. You can use z-
index to position an element in a specific layer of the stacking order. Larger numbers
bring the item closer to the front. You can use margin to offset elements from their
position.
Pattern SELECTOR { position:ABSOLUTE_FIXED_RELATIVE;
z-index:+VALUE;
left:±VALUE; right:±VALUE;
margin-left:±VALUE; margin-right:±VALUE;
top:±VALUE; bottom:±VALUE;
margin-top:±VALUE; margin-bottom:±VALUE; }
Location This design pattern applies to all elements.
Limitations Fixed position doesn’t work in Internet Explorer 6, but it works fine in all newer versions.
Example I assigned position:relative to the division to make it positioned.
An element is positioned when it has been assigned to position:relative,
position:absolute, or position:fixed. Floats can be positioned using
position:relative. Being positioned makes an element the reference point to which its
closest absolutely positioned descendants are positioned.
The image of the star comes before the final paragraph in document order. This would
normally cause the final paragraph to be rendered on top of the star, but I assigned a
higher z-index to the image to place it on top.
Related to Closest Positioned Ancestor, Static, Absolute, Fixed, Relative, Float and Clear