WEB STANDARDS CREATIVITY

104
The result of this is that your catchy site slogan is transformed into something more attractive, as seen in Figure 4-12.
Figure 4-12. Positioning and z-index combine to create the branding of the site with few worries.
Smile for the accessibility guy
Your work is almost complete, but one important aspect of the WorrySome.net brand is still missing: the yellow smiley face.
If you flick backwards a few pages to look at the markup for this page, you will see that every element and attribute has
been used; nothing has gone to waste. Nothing that is, except the unordered list that holds the handy skip links.
Don’t worry; this element will soon become useful to you. Many web designers and developers choose to hide these embedded
accessibility helpers, often pushing them off-screen and out of view. You are going to use this element to bring the
branding area to life, by attaching the smiley face background-image.
ul[id="nav_access"] {
position : absolute;
top : -33px;
right : -50px;
height : 291px;
width : 340px;
margin : 0;
padding : 0;
background : url(../images/a-access.png) no-repeat;
text-indent : -9999px; }
Preview the branding area in all its smiley glory in your browser, and you will see that the face is not smiling out at you.
There is one important line of CSS missing, along with an important lesson to learn. Unless you specify a z-index value for
any positioned element, those that follow it in the order of the document will always sit on top. The closer to the closing
tag they are, the higher in the stacking order they will be.