CSS之显示覆盖内容（z-index）

作者：System 时间：2024年08月11日分类：所有,css 字数：691

这篇文章距离上次修改已过444天，其中的内容可能已经有所变动。

在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的上方。

CSS之显示覆盖内容（z-index）

评论已关闭

推荐阅读