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

问题描述

我对使用 z-index 来决定堆叠顺序有些困惑。

了解浏览器如何使用 position 属性来处理元素。

决定元素的堆叠顺序是否有明确定位的元素？

不同情况的示例是值得赞赏的。一般来说：

1. 混合同级< div> 位置设置。


2. 嵌套< div> 与sibling混合< div>
   

   解决方案

   CSS的基础 z-index 属性

   
   
   

   一个简单的概念

   
   
   

   z-index 属性基于一个简单的概念：具有较高值的​​元素将位于沿着z轴具有较低值的元素前面。因此，如果您将 z-index：1 应用于 div.box1 和 div.box2 有 z-index：0 ，则 div.box1 会覆盖 div.box2 。

   
   
   

   在z轴方面，它指的是三维平面上的深度。在您的计算机上，它可以解释为物体移动距离你更近和更远的飞机。 （了解有关
   ^{资料来源：维基百科}

   
   
   

   ---

   
   
   

   z -index 适用于定位元素

   
   
   

   除非您处理flex项目或网格项目， code> z-index 属性仅适用于定位的元素。这意味着你可以在 position：absolute ，，position：relative的元素上使用 z-index ， position：fixed 或 position：sticky 。如果元素具有 position：static （默认值）或一些其他定位方案，如 float code> z-index 将没有效果。

   
   
   

   如上所述，虽然 z-index ，如 CSS 2.1 中所定义，仅适用于定位的元素， flex项 和 网格项 可以创建即使位置是 static 。

   
   

   4.3。 Flex项目Z顺序

   
   
   

   Flex项目的绘制与内嵌块完全相同，但使用顺序修改的文档顺序来代替原始
   文档顺序和除 auto 之外的 z-index 值创建堆叠上下文，即使位置是 static 。

   
   
   

   5.4。 Z轴订购： z-index 属性

   
   
   

   网格项与内联块完全相同，除了订单修改的文档顺序是用
   代替原始文档顺序，并且 z-index 值 auto 创建堆叠上下文，即使
   位置是 static 。

   
   

   这是一个演示 z-index ： https://jsfiddle.net/m0wddwxs/

   
   
   

   ---

   
   
   

   堆叠上下文

   
   
   

   并应用 z-index 时，将创建堆栈上下文。

   
   
   

   （另请参阅：创建堆叠上下文的完整情境列表）

   
   
   

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

   
   
   

   本质上，堆叠上下文限制 z-index 作用于元素本身，其子元素不能影响另一堆叠上下文中元素的堆叠顺序。

   
   
   

   如果你试图应用越来越高的 z-index 值，只是为了发现元素永远不会在前面移出，你可能试图覆盖一个元素不同的堆叠上下文。

   
   

   在堆叠顺序中向前或向后移动
   的共同父元素组成了所谓的stacking
   上下文。完全理解堆叠上下文是真正的
   掌握z-index和堆叠顺序如何工作的关键。

   
   
   

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

   
   
   

   〜什么没有人向你介绍Z-Index

   
   

   
   
   

   ---

   
   
   

   堆叠顺序

   
   
   

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

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

   如果应用了 z-index 属性，订单已修改：

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

   资料来源： W3C

   
   
   

   ---

   
   
   

   底线： em>一旦你了解堆叠上下文， z-index 很容易。

   
   
   <
   
   

   有关 z-index 的示例，请参阅： z-index的工作原理

   
   
   

   有关简短但内容丰富的文章解释 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屋！