CHAPTER 9 ■ POSITIONING: ADVANCED
Top Offset
Problem You want to offset an element and its content from the top of its parent or closest
positioned ancestor.
Solution To offset a top-aligned element from the top, you can assign a value other than zero to
margin-top. A positive value in margin-top offsets down (toward the inside), and a
negative value offsets up (toward the outside).
This design pattern is symmetrical to the Bottom Offset pattern, except content inside
bottom-offset elements can’t be automatically aligned to the bottom.
See the Top Aligned design pattern for details on how to top-align an element.
Patterns Top-offset sized static block
BLOCK-SELECTOR { position:static; height:+VALUE;
margin-top:±VALUE; margin-bottom:auto; }
Top-offset shrinkwrapped static block
BLOCK-SELECTOR { position:static; height:auto;
margin-top:±VALUE; margin-bottom:0; }
Top-offset sized absolute element
SELECTOR { position:absolute; height:+VALUE;
margin-top:±VALUE; margin-bottom:auto;
top:0; bottom:auto; }
Top-offset shrinkwrapped absolute element
SELECTOR { position:absolute; height:auto;
margin-top:±VALUE; margin-bottom:auto;
top:0; bottom:auto; }
Top-offset stretched absolute element
SELECTOR { position:absolute; height:auto;
margin-top:±VALUE; margin-bottom:0;
top:0; bottom:0; }
Location This pattern applies to all elements.
Limitations Stretched Absolute doesn’t work in Internet Explorer 6, but it does work in all newer
versions.
Example The shrinkwrapped static block has a negative top margin that moves it up and over the
previous sized static block.
Related to Top Aligned, Bottom Offset, Middle Offset