课程
开始
开始学习
CodeGym /课程 /Frontend SELF ZH /叠加上下文

叠加上下文

Frontend SELF ZH
第 21 级 , 课程 1
可用

2.1 z-index 属性

叠加上下文在 CSS 中由z-index属性控制，并决定了元素如何在 Z 轴上（垂直于屏幕的第三维度）相互叠加。理解和正确使用z-index和叠加上下文能够创建复杂且动态的布局，具有重叠的元素。

叠加上下文基础

叠加上下文决定了元素将如何彼此显示在上方。网页上的每个元素都有一个叠加层次，可以通过z-index属性进行改变。

叠加规则

  1. 文档树的位置: 在文档树中位于较下方的元素会叠加在位于较上方的元素之上。
  2. 属性 z-index: z-index 值较大的元素会叠加在 z-index 值较小的元素之上。

z-index 基础

z-index属性定义了当元素相互重叠时的叠加顺序。z-index 值较大的元素显示在 z-index 值较小的元素之上。z-index仅应用于具有定位的元素（position: relative，absolute，fixed或sticky）。

语法:

    
      .element {
        position: relative; /* 或 absolute, fixed, sticky */
        z-index: number;
      }

其中:

  • number: 一个可以是正数或负数的整数。数值越大，元素在叠加顺序中的位置越高。

z-index 的使用示例:

在这个例子中，Box 2 具有z-index: 2;，将显示在 Box 1 和 Box 3 上方，而 Box 1 将显示在 Box 3 上方。

CSS 
    
      .wrapper {
        min-height: 300px;
      }

      .box {
        position: absolute;
        min-width: 125px;
        min-height: 125px;
        color: white;
      }

      .box1 {
        z-index: 1;
        top: 50px;
        left: 50px;
        background-color: red;
      }

      .box2 {
        z-index: 2;
        top: 100px;
        left: 100px;
        background-color: blue;
      }

      .box3 {
        z-index: 0;
        top: 150px;
        left: 150px;
        background-color: green;
      }
Kotlin
HTML 
    
      <div class="wrapper">
        <div class="box box1">Box 1</div>
        <div class="box box2">Box 2</div>
        <div class="box box3">Box 3</div>
      </div>

2.2 叠加上下文 (stacking context)

叠加上下文是指在决定叠加顺序时作为一个整体处理的一组元素。叠加上下文是在满足某些条件时创建的，比如应用z-index与定位或其他 CSS 属性。

创建叠加上下文

叠加上下文在以下情况下创建：

  1. 元素具有relative、absolute、fixed或sticky定位，并且z-index值不为auto。
  2. 元素的opacity属性值小于1。
  3. 元素的transform、filter、perspective、clip-path、mask或mask-image属性有非默认值。
  4. 元素的contain属性值为layout、paint或strict。

创建叠加上下文的示例:

CSS 
    
      .parent {
        position: relative;
        z-index: 10;
        min-height: 300px;
        padding: 20px;
        color: white;
        background-color: #f1c40f;
      }

      .child-blue {
        position: absolute;
        z-index: 1;
        top: 50px;
        left: 50px;
        min-width: 125px;
        min-height: 125px;
        background-color: #3498db;
      }

      .child-red {
        position: absolute;
        z-index: 2;
        top: 100px;
        left: 100px;
        min-width: 125px;
        min-height: 125px;
        background-color: #e74c3c;
      }
HTML 
    
      <div class="parent">
        父元素
        <div class="child-blue">1</div>
        <div class="child-red">2</div>
      </div>

代码解释:

  • .parent: 具有position: relative;和z-index: 10;的元素，它创建了一个新的叠加上下文
  • .child-blue: 具有position: absolute;和z-index: 1;的元素，它位于由父元素创建的新叠加上下文中
  • .child-red: 具有position: absolute;和z-index: 2;的元素，它也位于由父元素创建的新叠加上下文中，并显示在.child-blue之上

2.3 叠加上下文的交互

同一叠加上下文中的元素不能叠加到另一个叠加上下文的元素上，除非改变上下文本身的顺序。这意味着，同一叠加上下文中z-index值更高的元素总是显示在z-index值更低的元素之上。

叠加上下文的交互示例:

CSS 
    
      .wrapper {
        min-height: 500px;
      }

      .container1 {
        position: relative;
        z-index: 10;
        padding: 20px;
        margin-bottom: 200px;
        background-color: lightgrey;
      }

      .container2 {
        position: relative;
        z-index: 20;
        padding: 20px;
        background-color: lightpink;
      }

      .box {
        position: absolute;
        min-width: 125px;
        min-height: 125px;
        color: white;
      }

      .box1 {
        z-index: 1;
        top: 50px;
        left: 50px;
        background-color: red;
      }

      .box2 {
        z-index: 2;
        top: 100px;
        left: 100px;
        background-color: blue;
      }
HTML 
    
      <div class="wrapper">
        <div class="container1">
          <div class="box box1">Box 1</div>
          <div class="box box2">Box 2</div>
        </div>

        <div class="container2">
          <div class="box box1">Box 3</div>
          <div class="box box2">Box 4</div>
        </div>
      </div>

在这个示例中，具有z-index: 20;的.container2将显示在具有z-index: 10;的.container1上方。每个容器内的元素将根据其z-index进行排列，但不会与另一个容器中的元素重叠。

2.4 z-index 的负值

z-index可以取负值，这允许元素显示在 z-index 为零或正值的元素下方。

CSS 
    
      .container {
        min-height: 300px;
      }

      .box {
        position: absolute;
        min-width: 125px;
        min-height: 125px;
        color: white;
      }

      .box1 {
        z-index: -1;
        top: 100px;
        left: 100px;
        background-color: #3498db;
      }

      .box2 {
        z-index: 0;
        top: 150px;
        left: 150px;
        background-color: #e74c3c;
      }
HTML 
    
      <div class="container">
        <div class="box box1">-1</div>
        <div class="box box2">0</div>
      </div>

代码解释:

  • .box1: 具有z-index: -1;的元素，将显示在z-index: 0;的元素之下

使用 z-index 的建议:

  • 尽量减少使用 z-index: 尽量仅在确实需要时使用z-index。这有助于避免复杂和混乱的叠加结构
  • 有意识地创建叠加上下文: 创建新的叠加上下文可以帮助管理元素叠加，但可能会使文档结构更复杂
  • 使用语义化的 z-index 值: 为元素赋予有意义的z-index值，例如，使用正值表示上层元素，负值表示下层元素
评论
TO VIEW ALL COMMENTS OR TO MAKE A COMMENT,
GO TO FULL VERSION