Introduction to CSS Positioning Properties Part 2 - The "z-index" property
(Page 3 of 6 )
The "z-index" property is used to specify how elements stack on top of each other in a document. The default value for each element is z-index: 0 or "auto," and values between 0 and 32767 can be specified. This property is very useful when we're dealing with two or more elements partially or completely overlapped each other. In this case, the element with the highest "z-index" will be displayed on top. If two or more elements have the same value for this property, the stacking order will be determined by the element source code order.
A simple example would be:
<style type="text/css">
#element1 {
position: absolute;
width: 500px;
top: 200px;
left: 100px;
z-index: 1;
}
#element2 {
position: absolute;
width: 500px;
top: 200px;
left: 150px;
z-index: 2;
}
</style>
In the above example, we've defined two elements which are absolutely positioned in the document. They're overlapping each other, but the second element will be displayed on top of the first one, since its z-index property is set to 1. This means it will be stacked as the top element.
One common use for this property is related to CSS drop-down menus, which need to be overlapped over other page elements to achieve the desired visual effect. Usually, menu containers elements will be positioned on top of the stack, and displayed or hidden accordingly to their "visibility" property. By the way, that's the next visual property to be presented in this guide.
Next: The "visibility" property >>
More Style Sheets Articles
More By Alejandro Gervasio
/ 9 
