Graphics Programs Reference
In-Depth Information
h anks to positioning, we can put things anywhere. h is is great power. Use it responsibly.
155
Figure 4-50: Moving the metadata from left to right.
FIXED HEADERS AND FOOTERS
Remember frames? You could put a navbar or a footer at the top or bottom of the browser
window and have it never, ever move. h is was used for ill in many cases, but the core idea
isn't a bad one, and you can actually recreate frames with CSS as well as do frame-like things
that don't really create frames. h e key is i xed positioning.
For example, suppose you wanted your header to always be at the top of the screen while
content scrolled past it (see Figure 4-51). Simple:
.header { position : fixed ; top : 0 ; left : 0 ; width : 100% ; z-index : 1 ;}
h at nails the header to the top of the browser window and, thanks to the explicit z-index
value, places it above any non-positioned content. (Without it, whether the positioned
element overlaps other content or vice versa is determined by their document source order.)
In technical terms, the browser window is the header's containing block. No matter how
much you scroll the page, the header will not move.
 
Search WWH ::




Custom Search