By using this site you agree to the use of cookies by Brugbart and our partners.

Learn more

CSS Z-index Property

Reference on CSS z-index. Including, background information, and how it is used or applied to elements. Note. Z-index is used in conjunction with the position property.

Edited: 2011-03-16 02:36

The z-index property is used to position elements, visually, on top of each other. Where z can represent the z-axis.

Z-index can be used in conjunction with css position, to enable designers to use "Layer Page Technique's".

For example, consider that you have a Sky as a background image, instead of using one big image, you can now simply use a gradient, and place the skys as transparent png using css positioning.

How to use Z-index

For z-index to work, the element to witch its applied, must have its position set to something else then static, which is the default position.

Example

#Color1 {
  position: relative;
  z-index: 1;
  background: #FF7751;
  width: 150px;
  height: 150px;
}
#Color2 {
  position: absolute;
  z-index: 2;
  background: #FF5BBA;
  width: 150px;
  height: 150px;
  top: 25px;
  left: 25px;
}

Inherited? NO!