HTML and CSS Reference
In-Depth Information
Figure 9-21.
The styled page before positioning the masthead
Adding a
position:fixed
declaration to the masthead rule changes its positioning model, but by omitting
any offset properties (
left
,
right
,
top
, or
bottom
) and leaving them to their default
auto
values, the
element remains just where it would be otherwise:
#masthead {
background-color: #b88c53;
border-bottom: 4px solid #a67a40;
color: #fff;
padding: 10px 30px;
position: fixed;
}
Giving the masthead a fixed position takes the element out of the normal content flow, so now all the
subsequent content can move up into the space the masthead previously occupied, as shown in Figure
9-22. The masthead overlaps the content now, hiding part of the title and byline, and has also collapsed to
the width of its content (plus padding). Obviously, this just won't do.
