14 lines
1.5 KiB
Plaintext
14 lines
1.5 KiB
Plaintext
---
|
||
title: 描述 `z-index` 以及如何形成堆叠上下文。
|
||
---
|
||
|
||
CSS 中的 `z-index` 属性控制重叠元素的垂直堆叠顺序。`z-index` 仅影响已定位的元素（具有 `position` 值不为 `static` 的元素）及其后代或 flex 项目。
|
||
|
||
在没有任何 `z-index` 值的情况下，元素按照它们在 DOM 中出现的顺序堆叠（在同一层级中，最下面的元素出现在最上面）。具有非静态定位的元素（及其子元素）将始终出现在具有默认静态定位的元素之上，而不管 HTML 层次结构如何。
|
||
|
||
堆叠上下文是包含一组层的元素。在局部堆叠上下文中，其子元素的 `z-index` 值是相对于该元素设置的，而不是相对于文档根元素。该上下文之外的层——即局部堆叠上下文的同级元素——不能位于其内的层之间。如果元素 B 位于元素 A 的顶部，而元素 A 的子元素 C 永远不能高于元素 B，即使元素 C 的 `z-index` 比元素 B 高。
|
||
|
||
每个堆叠上下文都是自包含的 - 在元素的content堆叠后，整个元素被认为在父堆叠上下文的堆叠顺序中。少数 CSS 属性会触发新的堆叠上下文，例如 `opacity` 小于 1、不是 `none` 的 `filter` 以及不是 `none` 的 `transform`。
|
||
|
||
***注意***：确切地说，什么元素有资格创建堆叠上下文，列在[规则](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_positioned_layout/Stacking_context#The_stacking_context)的这一长串中。
|