Head First HTML with CSS

Putting the coupon on the page
Add the new coupon rules to your “starbuzz.css” file,
save, and then reload the page. You may need to make
the browser smaller to be able to see that the coupon
stays put even when you scroll. Clicking on the coupon
should take you to the “freecoffee.html” page.
You know, this looks great, but it might just be even more
snazzy if the coupon was offset to the left, so it looks like
it’s coming out of the side of the viewport. Now, we could
get into our photo editing software and cut off the left
hand side of the image to create that effect. Or, we could
just use a negative offset so that the left side of the image
is positioned to the left of the edge of the viewport.
That’s right, you can do that.
Using a negative left property value
Specify a negative property value just like you do a positive one:
just put a minus sign in front. Like this:
#coupon {
position: fixed;
top: 300px;
left: -90px;
}
By specifying -90 pixels,
we’re telling the browser to
position the image 90 pixels
to the left of the edge of
the viewport.
The browser will gladly position the
image to the left of the viewport
for you, and only the part of the
image that is still on the screen
will be viewable.
-90
pixels
div id=“coupon”
300 pixels
layout and positioning
you are here 537