CSS 中的 z-index 属性实例详解-前端开发

下面是“CSS 中的 z-index 属性实例详解”的完整攻略。

下面是“CSS 中的 z-index 属性实例详解”的完整攻略。

简介

在网页制作中，有时需要展现多个层，但是这些层有可能会重叠在一起，这时就需要用到 z-index 属性，它可以帮助我们设置元素的堆叠顺序。本文将详细介绍如何使用 z-index 属性。

基本语法

z-index 属性控制堆叠顺序，它的值决定了元素的层叠级别。 z-index 属性可以接收正整数、负整数和 0 三种取值，数值越大代表元素的层叠级别越高，同时 z-index 属性只能应用于定位元素（即 position 属性设置为 relative、absolute 或 fixed 的元素）。

示例代码如下：

.element {
  position: relative; /* 设置元素为相对定位 */
  z-index: 1; /* 设置元素 z-index 属性值为 1 */
}

注意事项

z-index 属性值是相对值，而不是绝对值，所以不同元素的 z-index 值大小相互比较只有相对意义。
相比较同一个父元素内部的定位元素，一般我们直接比较 z-index 的大小。而不同父级元素之间，需要比较祖先元素间的 z-index 的大小关系。

示例1

下面根据实际案例来介绍 z-index 的应用。

HTML 代码：

<div class="box">
  <div class="mask"></div>
  <img src="example.jpg" />
</div>

CSS 代码：

.box {
  position: relative;
}

.mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1; /* 设置遮罩层的z-index值为1 */
}

img {
  position: relative;
  z-index: 2; /* 设置图片的z-index值为2 */
}

上述代码实现了一个带遮罩的图片效果，具体实现方式为：父级元素 .box 通过 position: relative 定位；蒙层元素 .mask 通过 position: absolute 定位，并且设置 top: 0、left: 0、width: 100%、height: 100% 来覆盖整个父级元素，同时设置 background: rgba(0, 0, 0, 0.5) 来设置半透明的背景色；最后设置蒙层元素 .mask 的 z-index: 1（比图片元素的 z-index: 2 小），以确保蒙层在图片下面。

示例2

下面再举一个在实际项目中可能会使用的 z-index 示例，即如何实现一个悬浮窗口效果。

HTML 代码：

<div class="box">
  <div class="panel">
    <h3>悬浮窗口</h3>
    <p>这是悬浮窗口的内容</p>
  </div>
  <button class="btn">点击弹出悬浮窗口</button>
</div>

CSS 代码：

.box {
  position: relative;
}

.panel {
  position: absolute;
  top: -120px; /* 为了让面板上浮，需要设置负值 */
  left: 50%;
  width: 240px;
  padding: 10px;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 5px;
  box-shadow: 0 0 5px #aaa;
  z-index: -1; /* 默认设置z-index为-1，使其在按钮的下面 */
}

.btn {
  padding: 5px;
  background: #f00;
  color: #fff;
  border: none;
  border-radius: 5px;
}

.btn:hover + .panel {
  z-index: 2; /* 当鼠标滑过按钮时，将面板上移 */
  top: -80px; /* 面板的向上偏移量 */
}

上述代码实现了一个悬浮窗口的效果，即通过 :hover 选择器实现按钮滑过时面板的上移，并且通过设置面板的 z-index 值比按钮小，以确保面板在按钮后面。