Pro HTML5 and CSS3 Design Patterns

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