HTML and CSS Reference
In-Depth Information
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
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: 350px;
left: -90px;
}
-90
pixels
div id=“coupon”
