HTML and CSS Reference
In-Depth Information
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.
vertical-align
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.
