CSS之显示覆盖内容（z-index）
在CSS中，z-index属性主要用于管理定位元素（例如：position: absolute、position: relative、position: fixed等定位方式）的堆叠顺序（stack order）。元素的z-index值越大，它就越位于顶层。
注意，z-index只能在定位元素上生效，也就是说，如果一个元素的position属性值不是static（默认值），那么它的z-index才会有意义。
下面是一个简单的例子，演示了如何使用z-index来控制层叠顺序：
<!DOCTYPE html>
<html>
<head>
<style>
#div1, #div2 {
position: absolute;
width: 100px;
height: 100px;
}
#div1 {
background: red;
z-index: 1;
}
#div2 {
background: blue;
left: 20px;
top: 20px;
z-index: 2;
}
</style>
</head>
<body>
<div id="div1">DIV 1</div>
<div id="div2">DIV 2</div>
</body>
</html>在这个例子中，div1和div2都是绝对定位的元素，div2的z-index值比div1的大，因此它显示在div1的上方。
评论已关闭