The z-index property specifies the stack order of an element. In other words, when there is an overlap between two elements, the z-index value determines which one shows up on top. The element with a larger z-index value will appear on top.
For example, say we define two blocks with the following CSS code:
|
#redblock {
z-index: 1;
position:
absolute;
width:80px;
height:100px;
top:20px;
left:20px;
border: 1px solid #FFF;
background-color: #FF0000;
}
#pinkblock {
z-index: 2;
position: absolute;
width:100px;
height:80px;
top:50px;
left:50px;
border: 1px solid #FFF;
background-color: #FF00FF;
}
|
The following HTML code,
<div id="redblock"></div>
<div id="pinkblock"></div>
|
renders the following:
As we can see, the pink block, with a z-index value of 2, lies on top of the red block, which has a z-index value of 1.
Next: CSS Text
Link to this page: If you find this page useful, we encourage you to link to this page. Simply copy and paste the code below to your website, blog, or profile.
More Tutorials: SQL PHP HTML
Copyright 2007-2009 1keydata.com All Rights Reserved. Privacy Policy
|
|