Home arrow Style Sheets arrow Page 3 - Introduction to CSS Positioning Properties Part 2

Introduction to CSS Positioning Properties Part 2

In this second part of a two-part article, we examine more positioning properties available in the CSS2 specifications, and use what we've learned to build a simple drop-down menu without employing any JavaScript.

Author Info:
By: Alejandro Gervasio
Rating: 5 stars5 stars5 stars5 stars5 stars / 14
February 28, 2005
  1. · Introduction to CSS Positioning Properties Part 2
  2. · The "clear" property
  3. · The "z-index" property
  4. · The "visibility" property
  5. · The "overflow" property
  6. · A simple drop-down menu using the "overflow" and "display" properties

print this article

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;



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.

blog comments powered by Disqus

- CSS Padding Overview
- CSS: Margins Overview
- Top CSS3 Button Tutorials
- More Top CSS3 Tutorials for Animation and Im...
- CSS Mega Menus: Adding Extra Sections
- CSS Mega Menus
- CSS3 Accordian Menu: Horizontally Display Hy...
- CSS Combinators: Working with Child Combinat...
- CSS Combinators: Using General Siblings
- Intro to CSS Combinators
- CSS Semicircles and Web Page Headers
- Drawing Circular Shapes with CSS3 and Border...
- More CSS Pagination Link Templates
- CSS Pagination Links
- Animated CSS3 Image Gallery: Advanced Transi...

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 

Developer Shed Affiliates


© 2003-2018 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials