English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
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.
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‹/›
The following table describes the value of this attribute.
Value | Description |
---|---|
integer | Set 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. |
auto | The 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. |
initial | Set this attribute to its default value. |
inherit | If specified, the associated element adopts its parent element's z-The value of the index attribute. |
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.
|
Please refer to the following tutorial:CSS Position,CSS Layer.