HTML and CSS Reference
In-Depth Information
element within its container. However it can be useful for menus or messages that you want to remain
visible as your user scrolls down the page, and fixed positioning can be put to creative use for some pretty
nifty scroll-based effects.
Listing 9-6 is the markup we're starting with for this demonstration. It's a site-wide masthead appearing
above a long article (we haven't included the entire article in this example), and we'll use fixed positioning
to make the masthead “stick” to the top of the window when a visitor scrolls down the page.
Listing 9-6.
The masthead and article that we'll style with fixed positioning
<header id="masthead">
<hgroup>
<h1>Cape and Cowl Quarterly</h1>
<h2>Online Edition | August, 2011</h2>
</hgroup>
</header>
<article>
<header>
<h1 class="title">Where Do They Get Those Wonderful Toys?</h1>
<p class="byline">By Norm DePlume</p>
</header>
<!-- article text -->
</article>
Figure 9-21 shows our starting point. We've already added some style rules to establish some coloring and
typography, and to define the column width, but we haven't yet positioned the masthead (it's still defaulting
to
position:static
for now). As you scroll down the page, the masthead will scroll up and out of view
just like you'd expect.
