How to use css z-index attribute

css The z-index attribute is used to set the stacking order of elements; elements with a higher stacking order will always be in front of elements with a lower stacking order. This attribute only works on positioned elements (for example: position:absolute, position:relative, or position:fixed).

How to use the css z-index attribute?

z-index property sets the stacking order of elements. Elements with a higher stacking order will always appear in front of elements with a lower stacking order.

Syntax:

z-index : auto | number;

Parameters:

auto: Default. The stacking order is equal to the parent element.

number: Numeric value, sets the stacking order of elements; it can be a positive value or a negative value.

Description:This property sets the position of a positioned element along the z-axis, which is defined as the axis extending vertically to the display area. If it is a positive number, it is closer to the user, and if it is a negative number, it is further away from the user.

Note:All major browsers support the z-index attribute. The attribute value "inherit" is not supported in any version of Internet Explorer (including IE8). Elements can have negative z-index attribute values. Z-index only works on positioned elements (for example: position:absolute, position:relative, or position:fixed)!

css z-index attribute example

     
  
This is a heading
  
由于图像的 z-index 是 -1，因此它在文本的后面出现。
  

Rendering:

The above is the detailed content of How to use css z-index attribute. For more information, please follow other related articles on the PHP Chinese website!