HTML and CSS Reference
In-Depth Information
Although the footer is contained with the
<body>
element, because the footer has no containing element with a
position
declaration, it is positioned relative to the
<html>
element.
fixed
The final value for the
position
property is
fixed
. As with absolute elements, a fixed element is taken out of a
document's flow and does not affect the layout of elements around it. Unlike absolute, however, a fixed element is
positioned relative to the viewport (the browser window) and does not move when the page is scrolled.
For this example, add a banner image to the bottom of the page:
1.
In index.html, below the closing
</footer>
and above the closing
</body>
elements, add the following
HTML:
<img class=”banner-ad” src=”images/banner-25percent.png” alt=”25% Off All
Purchases” />
2.
Save index.html
3.
In styles.css, add the following declaration:
.banner-ad {
bottom: 0;
position: fixed;
right: 0;
}
4.
Save styles.css.
As shown in Figure 9-14, the 25% off banner remains fixed to the bottom right of the browser window. No matter
whether or not the user scrolls, that element remains fixed in that position, so it's always on display—sort of like you
had the power to glue an element to the inside of the user's screen!
Unfortunately, Internet Explorer 6 doesn't support
position: fixed;
, and furthermore, very few browsers on
mobile devices support
position: fixed;
due to technical performance issues. Fixed elements tend to be used
for noncritical aspects of a page, such as notices and adverts, so for browsers that don't support fixed elements, they
can be hidden or modified to be displayed in a different way using styles specific to those nonsupporting browsers;
this topic is covered in Chapter 15. Because the 25% banner used for Cool Shoes & Socks is an image—that can
only be square in proportion—the transparent section of the image prevents a user from clicking anything below that
invisible area, so for smaller screen sizes where that area may cover any part of the page that may be interacted with,
it is necessary to hide that banner anyway.
