CSS Z-Index



CSS Tutorial  >  Position  >  Z-Index

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




Copyright © 2014   1keydata.com   All Rights Reserved   Privacy Policy