HTML and CSS Reference
In-Depth Information
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>.
#coupon {
position: fixed;
top: 300px;
left: 100px;
}
100
pix
els
div id=“coupon”
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.
