HTML and CSS Reference
How does fixed positioning work?
I mpress friends and cow orkers by
Compared to absolute positioning, fixed positioning is pretty
straightforward. With fixed positioning, you specify the position of an
element just like you do with absolute positioning, but the position is
an offset from the edge of the browser's window rather than the page .
The interesting effect this has is that once you've placed content with
fixed positioning, it stays right where you put it and doesn't move,
even if you scroll the page.
r eferrin g to th e brows er wind ow as
t he view port. T ry it—i t works , and
t he W3C will no d appr ovingly.
So, say you have a <div> with an id of “coupon”. You can position
the <div> fixed to a spot 300 pixels from the top of the viewport, and
100 pixels from the left side, like this:
Here's t he id s elector
for the coupon <div>.
Position t he coupon 300 pixels
from the top, and 100 pi xels
from the left. You can al so use
right and bottom, just lik e with
absolute p ositioning.
H ere's where the element gets
p ositioned within the viewport.
Once you've got an element positioned, then comes the fun: scroll
around…it doesn't move. Resize the window…it doesn't move.
Pick up your monitor and shake it…it doesn't move. Okay, just
kidding on the last one. But the point is, fixed-position elements
don't move; they are there for good as long as the page is displayed.
Now, we're sure you're already thinking of fun things to do with
fixed positioning, but you've got a job to do. So let's get that
coupon on the Starbuzz page.