CSS3 布局 - z-index 属性

核心知识点

z-index 属性的工作原理
- z-index 属性用于控制元素的层叠顺序
- 它只对定位元素（position 值不为 static 的元素）有效
- z-index 值越高，元素在层叠顺序中越靠上
- 元素的层叠顺序决定了它在视觉上是显示在其他元素的上方还是下方
层叠上下文（Stacking Context）
- 层叠上下文是一个三维概念，元素在其中沿着垂直于屏幕的 z 轴排列
- 每个层叠上下文都有自己的层叠顺序
- 当元素创建新的层叠上下文时，其内部元素的层叠顺序将相对于该上下文
- 创建层叠上下文的方式：设置 z-index 值、使用 opacity < 1、使用 transform、使用 filter 等
z-index 的取值范围
- 整数值：正整数、负整数或零
- auto：元素的层叠顺序与父元素相同（默认值）
- 较大的 z-index 值会覆盖较小的值
- 相同 z-index 值的元素，按照它们在 HTML 中的出现顺序层叠（后出现的元素覆盖先出现的）
层叠顺序规则
- 背景和边框（层叠上下文的底层）
- 负 z-index 值的元素
- 块级元素
- 浮动元素
- 内联元素
- z-index: auto 或 z-index: 0 的元素
- 正 z-index 值的元素（层叠上下文的顶层）
z-index 的应用场景
- 创建模态框和弹出层
- 实现下拉菜单
- 设计固定导航栏
- 制作图片画廊和轮播图
- 构建复杂的 UI 组件

学习目标

理解 z-index 属性的工作原理
掌握层叠上下文的概念和创建方法
学会使用 z-index 控制元素的层叠顺序
了解层叠顺序的规则
能够在实际布局中正确应用 z-index 属性
理解 z-index 与定位属性的关系

代码示例

基本语法

.element {
  position: relative;
  z-index: 10;
}

实际应用

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>z-index 属性示例</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    
    body {
      font-family: Arial, sans-serif;
      line-height: 1.6;
      padding: 20px;
    }
    
    .container {
      position: relative;
      width: 600px;
      height: 400px;
      margin: 0 auto;
      border: 2px solid #333;
    }
    
    .box {
      position: absolute;
      width: 200px;
      height: 200px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: bold;
      color: white;
    }
    
    .box-1 {
      top: 50px;
      left: 50px;
      background-color: #4CAF50;
      z-index: 1;
    }
    
    .box-2 {
      top: 100px;
      left: 100px;
      background-color: #2196F3;
      z-index: 2;
    }
    
    .box-3 {
      top: 150px;
      left: 150px;
      background-color: #FF9800;
      z-index: 3;
    }
    
    .box-4 {
      top: 200px;
      left: 200px;
      background-color: #9C27B0;
      z-index: 4;
    }
    
    .modal {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.5);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 1000;
    }
    
    .modal-content {
      background-color: white;
      padding: 30px;
      border-radius: 8px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
      max-width: 400px;
      width: 100%;
    }
    
    .dropdown {
      position: relative;
      display: inline-block;
      margin: 20px;
    }
    
    .dropdown-button {
      background-color: #4CAF50;
      color: white;
      padding: 10px 15px;
      border: none;
      cursor: pointer;
    }
    
    .dropdown-content {
      display: none;
      position: absolute;
      background-color: #f9f9f9;
      min-width: 160px;
      box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
      z-index: 10;
    }
    
    .dropdown:hover .dropdown-content {
      display: block;
    }
    
    .dropdown-content a {
      color: black;
      padding: 12px 16px;
      text-decoration: none;
      display: block;
    }
    
    .dropdown-content a:hover {
      background-color: #f1f1f1;
    }
  </style>
</head>
<body>
  <h1>z-index 属性示例</h1>
  
  <h2>1. 基本层叠顺序</h2>
  <div class="container">
    <div class="box box-1">z-index: 1</div>
    <div class="box box-2">z-index: 2</div>
    <div class="box box-3">z-index: 3</div>
    <div class="box box-4">z-index: 4</div>
  </div>
  
  <h2>2. 下拉菜单</h2>
  <div class="dropdown">
    <button class="dropdown-button">下拉菜单</button>
    <div class="dropdown-content">
      <a href="#">选项 1</a>
      <a href="#">选项 2</a>
      <a href="#">选项 3</a>
      <a href="#">选项 4</a>
    </div>
  </div>
  
  <h2>3. 模态框</h2>
  <div class="modal">
    <div class="modal-content">
      <h3>模态框示例</h3>
      <p>这是一个使用 z-index 创建的模态框，它会显示在其他所有元素的上方。</p>
      <p>z-index 值：1000</p>
    </div>
  </div>
</body>
</html>

示意图

+------------------------------------------+
|                                          |
|  +----------------------------+          |
|  |                            |          |
|  |  z-index: 4 (紫色)         |          |
|  |  +---------------------+   |          |
|  |  |                     |   |          |
|  |  |  z-index: 3 (橙色)   |   |          |
|  |  |  +---------------+   |   |          |
|  |  |  |               |   |   |          |
|  |  |  | z-index: 2    |   |   |          |
|  |  |  | (蓝色)        |   |   |          |
|  |  |  | +-----------+ |   |   |          |
|  |  |  | | z-index:1 | |   |   |          |
|  |  |  | | (绿色)     | |   |   |          |
|  |  |  | +-----------+ |   |   |          |
|  |  |  +---------------+   |   |          |
|  |  +---------------------+   |          |
|  +----------------------------+          |
|                                          |
+------------------------------------------+

实践练习

创建一个包含多个重叠元素的页面，使用 z-index 控制它们的层叠顺序
实现一个模态框，确保它显示在所有其他元素的上方
创建一个带有下拉菜单的导航栏，使用 z-index 确保下拉菜单显示正确
设计一个图片画廊，使用 z-index 控制图片和描述的层叠顺序
尝试创建嵌套的层叠上下文，观察内部元素的层叠行为

常见问题

z-index 不生效的原因
- 元素没有设置定位属性（position 值为 static）
- 元素被包含在一个较低 z-index 值的层叠上下文中
- 元素的父元素创建了新的层叠上下文，限制了子元素的 z-index 影响范围
层叠上下文的创建方式
- 设置 position 值为 relative、absolute、fixed 或 sticky 并设置 z-index 值
- 使用 opacity < 1
- 使用 transform、filter、backdrop-filter 等属性
- 使用 will-change 属性并指定上述属性
- 使用 contain: layout、paint 或 strict
- 使用 CSS Grid 或 Flexbox 的某些属性
z-index 的最佳实践
- 使用相对较小的 z-index 值，避免使用过大的数值
- 为不同类型的元素建立 z-index 层级系统（例如：导航栏 100，下拉菜单 200，模态框 1000）
- 避免在整个页面中使用过多不同的 z-index 值
- 注意层叠上下文的影响，避免意外的层叠行为
z-index 与性能
- 频繁改变元素的 z-index 值可能会触发重排（reflow）
- 过多的层叠上下文可能会影响页面的渲染性能
- 对于动画元素，考虑使用 transform 代替 z-index 来避免重排

总结

z-index 属性是CSS3布局中的重要属性，它允许我们控制元素的层叠顺序，从而实现各种复杂的视觉效果。通过本教程的学习，你应该能够理解 z-index 的工作原理，掌握层叠上下文的概念，学会使用 z-index 控制元素的层叠顺序，并在实际项目中正确应用它来创建模态框、下拉菜单等UI组件。同时，你也应该了解 z-index 的最佳实践和性能考虑，以确保你的页面既美观又高效。