Cookie

CSS: property “z-index”

Published by TheJoe on

Estimated reading time: 2 minutes

Caution


This article was published more than a year ago, there may have been developments.
Please take this into account.

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 who know programs involving 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;
}

In the following example, 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 axis “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).

Look here:  The best way to create an HTML table

For those who want to experiment with the example shown, is published in this page.


TheJoe

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.

0 Comments

Leave a Reply

Avatar placeholder

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.