Home > Article > Web Front-end > How to use css z-index attribute
How to use css z-index attribute
- 青灯夜游Original
- 2019-05-27 14:23:464285browse
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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
img {
position: absolute;
left: 0px;
top: 0px;
z-index: -1;
}
h2,p{
background-color: white;
border: 1px solid red;
}
</style>
</head>
<body>
<h2>This is a heading</h2>
<img src="https://img.php.cn/upload/article/000/005/656/5af270fd37755429.jpg" / alt="How to use css z-index attribute" >
<p>由于图像的 z-index 是 -1，因此它在文本的后面出现。</p>
</body>
</html>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!