了解 z-index 堆叠顺序 [英] Understanding z-index stacking order

问题描述

我对使用 z-index 来决定堆栈顺序有点困惑.

我不太明白浏览器如何处理带有 position 属性的元素和没有它的元素.

是否有一个通用规则来决定元素的堆栈顺序，无论是否明确定位元素?

感谢不同情况的示例.一般而言:

1. 混合兄弟
   有位置设置和没有位置设置.
2. 嵌套
   s与兄弟

   s混合，有位置设置和没有位置设置.

解决方案

CSS 基础 z-index 属性

一个简单的概念

z-index 属性基于一个简单的概念:沿 z 轴，具有较高值的​​元素将位于具有较低值的元素之前.因此，如果您将 z-index: 1 应用到 div.box1，并且 div.box2 有一个 z-index: 0，然后 div.box1 将覆盖 div.box2.

就z轴而言，它指的是三维平面上的深度.在您的计算机上，它可以解释为物体离您越来越近的平面.(详细了解^{来源:维基百科}

<小时>

z-index 适用于定位元素

除非您正在处理弹性项目或网格项目，否则 z-index 属性仅适用于定位元素.这意味着您可以在具有 position: absolute、position:relative、position: fixed 的元素上使用 z-index或 position:sticky.如果元素具有 position: static(默认值)，或其他一些定位方案，如 float，则 z-index 将没有效果.

如前所述，虽然 z-index，如 CSS 2.1，仅适用于定位元素，<强>弹性项目和网格项目position 是 static，strong> 也可以创建堆叠上下文.

<块引用>

4.3.Flex 项目 Z 顺序

Flex 项目的绘制与内联块完全相同，除了使用顺序修改的文档顺序代替原始文档顺序，以及 auto 以外的 z-index 值会创建堆叠上下文，即使 position 是 static.

5.4.Z 轴排序:z-index 属性

grid items 的绘制顺序和 inline blocks 完全一样，只是顺序修改的文档顺序是用于代替原始文档顺序，并且 z-index 值而不是 auto 创建堆叠上下文，即使position 是 static.

以下是 z-index 处理非定位 flex 项目的演示:https://jsfiddle.net/m0wddwxs/

<小时>

堆叠上下文

一旦定位了一个元素并应用了 z-index，就会创建一个堆叠上下文.

(另见:完整的情况列表创建堆叠上下文.)

堆叠上下文是一组规则，用于管理带有 z-index 的定位元素及其后代.这些规则控制子元素在堆叠顺序中的位置以及属性的影响范围.

本质上，堆叠上下文将 z-index 范围限制在元素本身，其子元素不能影响另一个堆叠上下文中元素的堆叠顺序.

如果您曾经尝试应用越来越高的 z-index 值，却发现元素永远不会移出前面，那么您可能试图在不同的堆叠上下文中覆盖一个元素.

<块引用>

具有共同父级的元素组，可以向前或向后移动以堆叠顺序一起构成所谓的堆叠语境.充分理解堆叠上下文是真正实现的关键掌握 z-index 和堆叠顺序的工作原理.

每个堆叠上下文都有一个 HTML 元素作为其根元素.当在元素上形成新的堆叠上下文时，该堆叠上下文将其所有子元素限制在特定位置堆叠顺序.这意味着如果一个元素包含在一个在堆叠顺序的底部堆叠上下文，没有办法让它出现在另一个元素的前面堆叠顺序中较高的堆叠上下文，即使有z-index 十亿！

~ 没人告诉你的事关于 Z-Index

<小时>

堆叠顺序

CSS 在页面上布置元素时遵循堆叠顺序.这些是没有指定 z-index 时的堆叠规则，从最远到最近:

1. 根元素的背景和边框
2. 非定位、非浮动块元素，按照它们在源代码中出现的顺序
3. 非定位浮动元素，按照它们在源代码中出现的顺序
4. 内联元素
5. 定位元素，按照它们在源代码中出现的顺序

如果应用了 z-index 属性，则修改堆叠顺序:

1. 根元素的背景和边框
2. z-index 小于 0 的定位元素
3. 非定位、非浮动块元素，按照它们在源代码中出现的顺序
4. 非定位浮动元素，按照它们在源代码中出现的顺序
5. 内联元素
6. 定位元素，按照它们在源代码中出现的顺序
7. z-index 大于 0 的定位元素

来源:W3C

<小时>

底线:一旦您了解了堆栈上下文，z-index 就很容易了.

<小时>

有关 z-index 的示例，请参阅:如何 z-索引有效！

有关解释 z-index(包括 opacity 如何影响堆叠顺序)的简短但内容丰富的文章，请参阅:没有人告诉你关于 Z-Index 的内容

有关 z-index 的完整纲要，包括许多示例和插图，请参阅:MDN 理解 CSS z-index

要深入了解堆栈上下文，请阅读:W3C 详细描述堆栈上下文

I am a little confused about using z-index to decide stack order.

I do not quite understand how browsers treat elements with the position property in conjunction to those without it.

Is there a general rule to decide the stack order of elements whether it has explicitly positioned elements or not?

Examples of different situations are appreciated. Generally speaking:

1. mixed sibling <div>s with position set and without position set.
2. nested <div>s mixed with sibling <div>s with position set and without position set.

解决方案

Basics of the CSS z-index property

A Simple Concept

The z-index property is based on a simple concept: Elements with higher values will sit in front of elements with lower values along the z-axis. So if you apply z-index: 1 to div.box1, and div.box2 has a z-index: 0, then div.box1 will overlay div.box2.

In terms of the z-axis, it refers to depth on a three-dimensional plane. On your computer it can be interpreted as the plane on which objects move closer and farther from you. (Learn more about the Cartesian coordinate system.)

^{Source: Wikipedia}

---

z-index works on positioned elements

Unless you're dealing with flex items or grid items, the z-index property works only on positioned elements. This means you can use z-index on elements with position: absolute, position: relative, position: fixed or position: sticky. If the element has position: static (the default value), or some other positioning scheme like a float, then z-index will have no effect.

As noted, although z-index, as defined in CSS 2.1, applies only to positioned elements, flex items and grid items can create a stacking context even when position is static.

4.3. Flex Item Z-Ordering

Flex items paint exactly the same as inline blocks, except that order-modified document order is used in place of raw document order, and z-index values other than auto create a stacking context even if position is static.

5.4. Z-axis Ordering: the z-index property

The painting order of grid items is exactly the same as inline blocks, except that order-modified document order is used in place of raw document order, and z-index values other than auto create a stacking context even if position is static.

Here's a demonstration of z-index working on non-positioned flex items: https://jsfiddle.net/m0wddwxs/

---

Stacking Contexts

Once an element is positioned and a z-index is applied, a stacking context is created.

(Also see: Full list of circumstances where a stacking context is created.)

The stacking context is a set of rules for managing the positioned element with z-index, and its descendants. These rules govern the placement of child elements in the stacking order and the scope of the property's influence.

Essentially, the stacking context limits the z-index scope to the element itself, and its child elements cannot affect the stacking order of elements in another stacking context.

If you've ever tried to apply increasingly higher z-index values only to find that the element never moves out in front, you could be trying to overlay an element in a different stacking context.

Groups of elements with a common parent that move forward or backward together in the stacking order make up what is known as a stacking context. A full understanding of stacking contexts is key to really grasping how z-index and the stacking order work.

Every stacking context has a single HTML element as its root element. When a new stacking context is formed on an element, that stacking context confines all of its child elements to a particular place in the stacking order. That means that if an element is contained in a stacking context at the bottom of the stacking order, there is no way to get it to appear in front of another element in a different stacking context that is higher in the stacking order, even with a z-index of a billion!

~ What No One Told You About Z-Index

---

Stacking Order

CSS adheres to a stacking order when laying out elements on a page. These are the stacking rules when there is no z-index specified, from farthest to closest:

1. Backgrounds and borders of the root element
2. Non-positioned, non-floating block elements, in the order they appear in the source code
3. Non-positioned floating elements, in the order they appear in the source code
4. Inline elements
5. Positioned elements, in the order they appear in the source code

If a z-index property is applied, the stacking order is modified:

1. Backgrounds and borders of the root element
2. Positioned elements with a z-index of less than 0
3. Non-positioned, non-floating block elements, in the order they appear in the source code
4. Non-positioned floating elements, in the order they appear in the source code
5. Inline elements
6. Positioned elements, in the order they appear in the source code
7. Positioned elements with z-index of greater than 0

Source: W3C

---

Bottom line: Once you understand stacking contexts, z-index is easy.

---

For examples of z-index in action see: How z-index works!

For a brief but highly informative article explaining z-index (including how opacity affects the stacking order) see: What No One Told You About Z-Index

For a complete rundown on z-index, with many examples and illustrations, see: MDN Understanding CSS z-index

And for a deep dive into stacking contexts read: W3C Elaborate description of Stacking Contexts

这篇关于了解 z-index 堆叠顺序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！