Z-index Css ~ Catetan Arif

Kamis, 20 Februari 2014

The z-index CSS property specifies the z-order of an element and its descendants. When elements overlap, z-order determines which one covers the other. An element with a larger z-index generally covers an element with a lower one.

For a positioned box, the z-index property specifies:

The stack level of the box in the current stacking context.
Whether the box establishes a local stacking context.

Initial valueauto
Applies topositioned elements
Inheritedno
Mediavisual
Computed valueas specified
Animatableyes, as an integer
Canonical orderthe unique non-ambiguous order defined by the formal grammar

Syntax

Formal syntax: auto | <integer>

z-index: auto     /* Keyword value */
z-index: 0        /* <integer> value */
z-index: 3
z-index: 289

z-index: inherit

Values

auto: The box does not establish a new local stacking context. The stack level of the generated box in the current stacking context is the same as its parent's box.
<integer>: This integer is the stack level of the generated box in the current stacking context. The box also establishes a local stacking context in which its stack level is 0. This means that the z-indexes of descendants are not compared to the z-indexes of elements outside this element.

Examples

HTML

<div class="dashed-box">Dashed box
  <span class="gold-box">Gold box</span>
  <span class="green-box">Green box</span>
</div>

CSS

.dashed-box { 
  position: relative;
  z-index: 1;
  border: dashed;
  height: 8em;
  margin-bottom: 1em;
  margin-top: 2em;
}
.gold-box { 
  position: absolute;
  z-index: 2;
  background: gold;
  width: 80%;
  left: 60px;
  top: 3em;
}
.green-box { 
  position: absolute;
  z-index: 3;
  background: lightgreen;
  width: 20%;
  left: 20em;
  top: -25px;
  height: 7em;
  opacity: 0.9;
}

Result

Specifications

Specification	Status	Comment
CSS Transitions	Working Draft	Defines `visibility` as animatable.
CSS Level 2 (Revision 1)	Recommendation	Initial specification.

Browser compatibility

Feature	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari
Basic support	1.0	1.0 (1.7 or earlier)	4.0	4.0	1.0
Negative values (CSS2.1 behavior, not allowed in the obsolete CSS2 spec)	1.0	3.0 (1.9)	4.0	4.0	1.0

Source: https://developer.mozilla.org/en-US/docs/Web/CSS/z-index

Z-index Css