English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

CSS reference manual

CSS @rules

CSS attributes大全

CSS z-How to use the index attribute and examples

z-The index attribute specifies the stacking order of an element. Elements with a higher stacking order are always in front of elements with a lower stacking order. Note: z-index is performedPositioned Elements(position:absolute, position:relative, or position:fixed).

The following table provides usage instructions and version history of this attribute, as well as the syntax of its use in the JavaScript script.

Default Value:auto
Applies To:Positioned Elements
Inheritance:No
Animatable:Yes.Please refer to Animation Attributes.
Version:CSS 2,3

Note:When elements overlap, z-Index determines which one overlaps. The element with a higher element's z-Index is usually in front of elements with lower elements when elements overlap.

z-The syntax of index usage

The syntax of this attribute is as follows:

z-index: integer | auto | initial | inherit

The following examples demonstrate how to use z-index attribute.

  div {
   position: absolute;
   lop: 30px;
   left: 30px;
   z-index: 2;
  }
Test and see‹/›

Attribute Value

The following table describes the value of this attribute.

ValueDescription
integerSet the stack level order of the element box in the current stack context. This box also establishes a local stack context, where its stack level is 0 (zero). Negative integer values can be used.
autoThe stack level of the element box is the same as that of its parent box, and no new stack context is established. This is the default value.
initialSet this attribute to its default value.
inheritIf specified, the associated element adopts its parent element's z-The value of the index attribute.

Browser Compatibility

z-The compatibility of the index attribute of the browser, the numbers in the following table indicate the minimum version number of the browser that supports this attribute; all mainstream browsers support this attribute.

  • Firefox 1+

  • Google Chrome1+

  • Internet Explorer 4+

  • Apple Safari 1+

  • Opera 4+

Read More

Please refer to the following tutorial:CSS Position,CSS Layer.

Related Attributes:position,top,right,left,bottom.