TheJoe.it Into the (open) source

4May/130

CSS: property “z-index”

aces

Today we see an important property of CSS, also inherited from the last version, i CSS3. I'm talking about (as you will be guessed from the title) property "z-index".

The properties "height" and "width" impostarenno height and width, while "z-index" we need to move items into the third dimension of depth (the asse "The"). The third dimension is perpendicular to the screen and it will be easier to understand for those familiar with plans for the use of levels.

Imagine the screen as a table on which lay some playing cards, in this way:

In this example each "letter" is a "div", every "div" has a property "z-index" different. The smaller the value "z-index", more "distant" will be the cards, if the value is greater than the previous, the div will be placed above the other. The CSS used is the following:

 #box1 {
  	border: 1px solid black;
  	height: 100px;
  	width: 80px;
	position: absolute;
	left: 15px;
	top: 15px;
	background: red;
	z-index: 1;
}

#box2 {
  	border: 1px solid black;
  	height: 100px;
  	width: 80px;
	position: absolute;
	left: 20px;
	top: 30px;
	background: green;
	z-index: 2;
}

#box3 {
  	border: 1px solid black;
  	height: 100px;
  	width: 80px;
	position: absolute;
	left: 25px;
	top: 45px;
 	background: blue;
	z-index: 3;
}

#box4 {
  	border: 1px solid black;
  	height: 100px;
  	width: 80px;
	position: absolute;
	left: 30px;
	top: 60px;
	background: yellow;
	z-index: 4;
}

#box5 {
  	border: 1px solid black;
  	height: 100px;
  	width: 80px;
	position: absolute;
	left: 35px;
	top: 75px;
	background: magenta;
	z-index: 5;
}

The following, instead has been assigned the value "6" the property "z-index" del box 1:

Explain the value "z-index" not only set the position on the "The", but start a new hierarchy of elements. The property "z-index" also, accepts negative values and if two elements have the same value will be displayed according to the hierarchical order standard (above those inserted after).

For those wishing to do some testing with the example shown, is published in this page.

About

I keep this blog as a hobby by 2009. I am passionate about graphic, technology, software Open Source. Among my articles will be easy to find music, and some personal thoughts, but I prefer the direct line of the blog mainly to technology. For more information contact me.