CHAPTER 4 ■ BOX MODELSAbsolute Box
Problem You want to style the box of an absolute or fixed element.
Solution An absolute element is removed from the normal flow and put in a layer above or below it.
It is positioned in relation to its closest positioned ancestor or fixed to the viewport. It can
be sized, shrinkwrapped, or stretched to its closest positioned ancestor. Any element can be
positioned absolutely. Unlike other boxes, the position of an absolute box does not affect
the position of other boxes. Absolute boxes may overlap freely.
z-index controls the stacking order of positioned elements. A negative value places them
below the normal flow, and a positive value places them above the flow. Larger values move
them closer to the user in the stacking order.
left, right, top, and bottom apply to absolute boxes. When set to a measurement, left
aligns the left side of an absolute element to the left side of its container and offsets it by a
positive or negative value. right, top, and bottom work analogously. When left, right, top,
and bottom are all set to auto, a browser renders the absolute box in the same position it
would have had if it were rendered in the normal flow.
width sets the width of the element. width:auto is the default value. When width is auto
and both left and right are auto, the box is shrinkwrapped. When width is auto and both
left and right are 0 or some other value, the box is stretched. When width is a value, left
is a value, and right is auto, the box is sized and offset from the left. When width is a value,
left is auto, and right is a value, the box is sized and offset from the right.
height sets the height of the element. height, top, and bottom work analogously to width,
left, and right.
margin assigned to a positive value moves a side of an absolute box toward the center of its
container, and a negative value moves it away from center.
border and padding shrink the inner box of stretched absolute boxes. border and padding
expand the outer box of sized and shrinkwrapped absolute boxes and move them toward
the center of their container.
Pattern SELECTOR { position:ABSOLUTE_FIXED; z-index:+VALUE;^
overflow:VALUE; visibility:VALUE;
left:±VALUE; right:±VALUE; top:±VALUE; bottom:±VALUE;
width: +VALUE; height: +VALUE;
margin:±VALUE; padding:+VALUE;
border:+WIDTH STYLE COLOR; background:VALUES; }
Location This design pattern applies to all elements.
Tip Chapters 7 through 9 show how to position absolute boxes.
Example Notice how all three absolute boxes are removed from the flow, which brings together the
static BEFORE and AFTER blocks.
Related to Positioned (Chapter 7); Display, Box Model (Chapter 4); Width, Height, Sized,
Shrinkwrapped, Stretched (Chapter 5); Margin, Border, Padding, Background, Overflow,
Visibility (Chapter 6)