CSS: property “z-index”
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).
For those who want to experiment with the example shown, is published in this page.
0 Comments