HTML and CSS Reference
elements that appear later in the HTML are given precedence. By giving the drop-down menu a z-index of 10 ,
you move it above the product showcase.
Why 10? The navigation is the most important part of the website that has a position declaration, so at no point
should it be hidden below another element. There aren't 10 positioned elements on the page, so 10 can be assumed
as being the highest level. If you want to be extra safe though, you can give it a z-index of 10000 or even
1000000 . The CSS specification doesn't determine a maximum number for z-index but some very dedicated
people have done tests to determine this number for each browser. You'll be pleased to know that every browser in
use today can support stack orders higher than 2 billion (for more information, visit www.softwareas.com/
whats-the-maximum-z-index ) . I hope that's enough for you! Of course, if you want to make your CSS main-
tainable now and in the future, it's best to be sensible with z-index values.
Code Challenge: Apply z-index to Other Elements
In styles.css, do the following:
1. Add the declaration z-index: 5; to the .showcase .button rule set.
2. Add the declaration z-index: 9; to the .banner-ad rule set.
Project files update (ch09-02): If you haven't followed the previous instructions and are comfortable working from
here onward or would like to reference the project files up to this point, you can download them from
vertical-align and Vertical Centering Techniques
As explained early in this chapter, achieving vertical alignment via CSS is unfortunately not as straightforward as
you might expect. Although the vertical-align property seems like a perfect fit for the job, it works only for
inline-level and table-cell elements. Let's look at the vertical-align property and then use some “hacks” to
make block-level elements vertically center.
Initial value: baseline | Inherited: No | Applies to: inline-level and table-cell elements | CSS2.1
Browser support: IE 4+, Firefox 1+, Chrome 1+, Opera 4+, Safari 1+
The small speech bubble image that is included in the “Latest Blog Post” title is inline-level (remember images are
inline by default):
<h3><img src=”images/bg-blog.png” alt=”Latest Blog Post” />Latest Blog Post</h3>
The initial value for vertical-align is baseline , meaning the bottom of the speech bubble image vertically
aligns with the baseline of the title, as shown in Figure 9-18.