css中的z-index是什么

css中的z-index是什么

在 CSS 中，有一个属性可以显式控制 HTML 元素的堆叠顺序：z-index。具有较高值的​​元素就会出现在顶部：

<style>
  .box {
    position: relative;
    width: 50px;
  	height: 50px;
  	border: 3px solid;
  	background: silver;
  }
  .first.box {
    z-index: 2;
    background-color: peachpuff;
  }
  .second.box {
    z-index: 1;
    margin-top: -20px;
    margin-left: 20px;
  }
style>

<div class="first box">div>
<div class="second box">div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

因为.first.box元素的z-index值 比.second.box的大，所以它堆叠在前面。如果我们删除z-index 属性，.first.box就会处于.second.box元素后面。

但是有时候z-index更大也层级不一定生效。

<style>
body {
  background: #eee;
}

header {
  height: 60px;
  line-height: 60px;
  background: pink;
  text-align: center;
  position: relative;
  z-index: 2;
}

main {
  padding: 32px;
  position: relative;
  z-index: 1;
}

.tooltip {
  top: -12px;
  left: 0px;
  right: 0px;
  margin: 0 auto;
  width: 90px;
  text-align: center;
  padding: 8px;
  background: white;
  box-shadow: 1px 2px 8px hsla(0deg, 0%, 0%, 0.25);
  border-radius: 6px;
  position: absolute;
  z-index: 999999;
}
style>

<header>
  Header
header>
<main>
  <div class="tooltip">
    A tooltip
  div>
  <p>contentp>
main>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

从上图可以看到.tooltip的z-index值是比header元素更大的，但是却处于header元素之下，为了解释这种情况，我们需要了解堆叠上下文，这是一种晦涩但基本的 CSS 机制。在本文中，我们将探讨它们是什么、它们如何工作以及如何利用它们来发挥我们的优势。

层和组

我们使用photoshop来距离说明层和组的概念。

我们的图像有 3 个独立的画布，像煎饼一样堆叠起来。最底层是一张猫的照片，上面有两层添加了一些的细节。通过堆叠这些层，我们最终得到了的图像如下：

而且还可以对图层进行分组：

就像文件夹中的文件一样，组允许我们对图层进行分段。在堆叠顺序方面，不允许图层在组之间“混合”：所有dog的图层将出现在所有cat的图层之上。

当我们导出合成时，我们根本看不到猫，因为它在狗后面：

CSS的工作方式类似：元素被分组到堆叠上下文中。当我们给一个元素一个 z-index 时，该值仅与同一上下文中的其他元素进行比较。z-index 值不是全局的。

默认情况下，纯 HTML 文档将具有包含所有节点的单个堆叠上下文。但我们可以创建额外的上下文！

创建堆叠上下文的方法有很多，但以下是最常见的：

.element {
  position: relative;
  z-index: 1;
}
1
2
3
4

通过组合这两个声明，会触发一个秘密机制：创建一个堆栈上下文，围绕该元素及其所有子元素形成一个组。

那么对于一开始抛出的那个header在.tooltip上的问题我们就可以进行解析了。

我们创建的堆叠上下文为：

• 根上下文

.tooltip元素的 z-index 为 999999，但该值仅在

<style>
  .box {
    width: 50px;
    height: 50px;
    border: 3px solid;
    background: silver;
  }
  .wrapper {
    display: flex;
  }
  .second.box {
    z-index: 1;
    background: hotpink;
    margin-top: 20px;
    margin-left: -20px;
    margin-right: -20px;
  }
style>

<div class="wrapper">
  <div class="first box">div>
  <div class="second box">div>
  <div class="third box">div>
div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

.wrapper {
  isolation: isolate;
}
1
2
3