了解z-index堆叠顺序

Question

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

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

是否有一般规则来决定元素的堆栈顺序是否已明确定位元素？

赞赏不同情况的例子.一般来说:

1. <div>具有位置设定且没有位置设定的混合兄弟姐妹.
2. 嵌套<div>s与兄弟s混合,<div>位置设置且没有位置设置.

Answer 1

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属性仅适用于定位元素.这意味着你可以使用z-index与元素position: absolute,position: relative,position: fixed或position: sticky.如果元素具有position: static(默认值)或某个其他定位方案(如a)float,则z-index无效.

如所指出的,虽然z-index,如在限定的CSS 2.1,只适用于定位的元素,柔性物品和网格项目即使当可以创建一个堆叠环境position是static.

4.3.Flex项目Z-Ordering

柔性物品油漆完全一样内嵌块,不同之处在于为了改性文档顺序代替原始文档顺序的使用,并且z-index其它值比auto创建一个堆叠内容即使position是static.

5.4.Z轴订购:z-index属性

的网格项目的绘制顺序是完全一样的内联块,不同之处在于为了改性文档顺序代替原始文档顺序的使用,并且z-index比其它值auto创建一个堆叠内容即使 position是static.

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

堆叠上下文

定位元素并z-index应用a后,将创建堆叠上下文.

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

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

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

如果您曾尝试应用越来越高的z-index值,只是为了发现元素永远不会向前移动,您可能会尝试在不同的堆叠上下文中叠加元素.

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

每个堆栈上下文都有一个HTML元素作为其根元素.在元素上形成新的堆叠上下文时,该堆叠上下文将其所有子元素限制为堆叠顺序中的特定位置.这意味着如果元素包含在堆叠顺序底部的堆叠上下文中,则无法使其出现在堆叠顺序较高的不同堆叠上下文中的另一个元素的前面,即使是十亿的z指数!

〜没有人告诉你Z-Index

堆叠订单

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

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

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

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

资料来源:W3C

结论:一旦理解了堆叠上下文,z-index就很容易了.

有关实际操作的示例,z-index请参阅:z-index如何工作!

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

有关完整的概述z-index,有许多示例和插图,请参阅:MDN了解CSSz-index

深入研究堆叠上下文:W3C详细描述堆叠上下文