Layering

Take a look at this page. We've got three boxes that overlap each other. When a browser sees that two or more boxes share some space, it always puts the last box coded on top. This goes back to the idea that browsers render your code from top to bottom. First coded, first rendered. Last coded, last rendered.

We can change this default layering with CSS. It's not always convenient or possible to change the order of the page's code.

The Z-Index

The problem is solved by using CSS's "z-index:" property. The "z-index" controls what is layered on top of what regardless of the order of the code.

The "z-index:" property is set to a numerical value like "2" or "3" and such. The bigger the number, the closer to the top a box is displayed. Lets use this to reverse the layering of the boxes by adding the following to the example's styling:

#box1{z-index: 3;}
#box2{z-index:2;}
#box3{z-index: 1;}

This would put Box #1 on top because its "z-index:" is higher than the other boxes. Box #3 would be at the bottom because it has the lowest "z-index:"

Here's what the new page would look like. When setting a "z-index:" for a group of boxes, it's best to set a "z-index:" for each box to insure the desired order.

Two huge myths about the "z-index:" property:

"The default 'z-index:' is 1". What bull. There is no "default 'z-index:'". If no "z-index:" is set, then the object styled will be layered according to its order in the code as per the first section of this page. Yes, there is a default layering -- based on the order the styled objects are coded in -- not a "default 'z-index:'".

"The page itself has a 'z-index:' of zero.". Wrong! The page, its background and content have no z-index. If the page had a z-index of zero, then you could use negative numbers to code a box "behind" the page. You can't, so there. All <div>s are presented on top of the page regardless of the <div>s "z-index:".

You can use negative numbers, though. This comes in handy when you're adding a new box to a page and you want it on the bottom of previously coded boxes. If the current box on the bottom is set to "z-index: 0", you can set the new box to "z-index: -1". Now the new box will appear below the older, "z-index: 0" one.

Visibility

Negative numbers will not hide a box. To hide a box we use "visibility:".

#box1 {visibility: hidden;}

The above would make Box #1 invisible. This is the key behind the pop up menus you see on some site. They use JavaScript to dynamically change the CSS "visibility:" property.

This page shows Box #1 with its "visibility:" set to "hidden". It looks like Box #1 wasn't even coded at all. Check the source and you can see that it is.

The "visibility:" property has two values you can use: "hidden" and "visible". I'll bet you can figure out what each value does. Both browser support "visibility:", "hidden", and "visible". Netscape also accepts the values "show" and "hide". The "visible" and "hidden" values are more often used because they are supported by both Netscape and IE.

Summary & Exercises

Code five overlapping boxes. Begin by not coding in any "z-index:". This is a good exercise for positioning boxes. Now reverse the order of layering by adding "z-index:" properties. Remember that bigger z-indexes appear on top.

Now make the middle boxes appear on top. Make some boxes invisible. This might not seem too useful now, but this is the basis of pop up menus that you'll be coding when you're learning JavaScript.

To Next Advanced CSS Lesson

Back To Advanced CSS Index