Creating Page Layouts with CSS - HTML, CSS, and Dynamic HTML - page 291

Figure 4-61 Fixed and inherited position

object inherits the
position style of i t s
container elemen t

objects remain
fixed in the browser
window even as the
document scrolls
behind them

◗

5. Continue to experiment with different positioning combinations. Close the demo
page when you're finished.

Now that you've seen how to work with the positioning styles, you'll place the header
element for the Cycle Pathology page at the coordinates (20, 20) using absolute positioning.

To place the page header:

◗

1. Return to the cp_reset.css file in your text editor and remove the selector header
and the comma that follows it from the style rule at the bottom of the file that
hides the page elements. Save your changes to the file.

◗

2. Go to the cp_styles.css file in your text editor. Directly below the style rule for
the body selector near the top of the page, insert the following style rule (see
Figure 4-62):

/* Styles for the Page Header */

header {
position: absolute;
top: 20px;
left: 20px;
}