在前端开发中，我们常常需要使用各种布局方式来实现网页的排版。其中，Flexbox 是一种非常实用的 CSS 布局方式，可以轻松实现强大的自适应布局效果。但是，在使用 Flexbox 进行布局时，经常会面对一个问题：如何在 Flexbox 中使用 z-index？
简单来说，z-index 是 CSS 中控制层级关系的属性。如果我们想要某个元素在另一个元素之上显示，就必须使用 z-index 属性。然而，在 Flexbox 中使用 z-index 并不是那么简单，因为 Flexbox 布局中的 flex 子项的层级关系并不是由其 z-index 属性来控制的。
那么，如何在 Flexbox 中使用 z-index 实现元素的层级关系控制呢？下面我们一起来探讨。
不要给 flex 容器设置 z-index
首先，我们需要明确一点：在 Flexbox 布局中，flex 容器的 z-index 属性是没有用的。也就是说，无论我们给 flex 容器设置多少 z-index，都不能改变其子项之间的层级关系。
这是因为，Flexbox 布局中的 flex 子项本身就具有一定的层级关系：flex 容器中的 flex 子项默认按照其在 HTML5 文档流中的位置顺序的反向顺序逐层叠加，即后面的 flex 子项会覆盖前面的 flex 子项。这个默认的层级关系并不由其 z-index 属性控制，而是由其在文档流中的位置决定的。
因此，在使用 Flexbox 布局时，我们不能通过设置 flex 容器的 z-index 属性来改变子项之间的层级关系。如果希望改变子项之间的层级关系，必须直接操作子项的 z-index 属性。
给 flex 子项设置 position 属性
在 Flexbox 布局中，如果我们要控制某个 flex 子项的层级关系，必须给该子项设置 position 属性。这是因为，只有设置了 position 属性后，才能够通过 z-index 来控制元素的层级关系。
需要注意的是，不同的 position 值对应的层级关系也不同。一般来说，我们可以在 flex 子项中设置如下的 position 属性值：
- relative：该子项相对于其原本的位置进行位移，不会改变其在 flex 容器中的位置顺序。
- absolute：该子项从文档流中脱离，相对于其离他最近的有定位属性（position 不为 static）的祖先元素进行定位，会改变其在 flex 容器中的位置顺序。
- fixed：该子项相对于浏览器窗口进行定位，不会改变其在 flex 容器中的位置顺序。
- sticky：该子项在其离他最近的有定位属性（position 不为 static）的祖先元素内滚动时会固定在某个位置，不会改变其在 flex 容器中的位置顺序。
根据子项设置的 position 值的不同，其 z-index 属性也有所不同。一般来说，position 的值越高，则其 z-index 值也应当越高。
使用示例
下面，我们通过一个实例来说明如何在 Flexbox 布局中使用 z-index 控制层级关系。
首先，我们需要设置一个 flex 容器，然后在其中添加三个子项：一个 div 元素、一个 p 元素和一个 span 元素。我们通过设置三个子项的 position 属性来控制其层级关系，并通过设置其 z-index 属性来控制其显示的位置。
<div class="flex-container"> <div class="div1">div元素</div> <p class="p1">p元素</p> <span class="span1">span元素</span> </div>
接下来，我们需要给每个子项设置 position 和 z-index 属性。为了更好地说明，我们这里给每个子项设置了不同的颜色，将其层级关系设置为 p 元素 > div 元素 > span 元素。
-- -------------------- ---- ------- --------------- - -------- ----- --------------- ------- ------------ ------- ---------------- ------- ------- ------ - ----- - --------- --------- -------- -- ------ ------ ------- ----- ----------------- ---- - --- - --------- --------- -------- -- ------ ------ ------- ----- ----------------- ------ - ------ - --------- ------ -------- -- ------ ------ ------- ----- ----------------- ----- -展开代码
这样，我们就成功地在 Flexbox 布局中使用 z-index 控制了子项的层级关系，实现了对元素的层级控制。
总之，对于前端开发者来说，掌握如何在 Flexbox 布局中使用 z-index 是非常必要的。通过灵活运用 position 属性和 z-index 属性，我们可以轻松实现各种复杂的自适应布局效果。希望这篇文章能够对大家有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67c9de36e46428fe9e1b889e
