我对使用 z-index
决定堆叠顺序有些困惑。
我不是很清楚浏览器如何处理带有 position
属性的元素和没有此属性的元素。
是否有一般规则来决定元素的堆叠顺序,无论它是否具有显式定位的元素? 欢迎提供不同情况的示例。总的来说:
- 具有设置位置和未设置位置的混合兄弟
<div>
。 - 嵌套的
<div>
和具有设置位置和未设置位置的兄弟<div>
混合。
我对使用 z-index
决定堆叠顺序有些困惑。
我不是很清楚浏览器如何处理带有 position
属性的元素和没有此属性的元素。
是否有一般规则来决定元素的堆叠顺序,无论它是否具有显式定位的元素? 欢迎提供不同情况的示例。总的来说:
<div>
。<div>
和具有设置位置和未设置位置的兄弟 <div>
混合。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
或position: sticky
的元素上使用z-index
。如果元素具有position: static
(默认值)或其他定位方案,如float
,那么z-index
将不起作用。
z-index
仅适用于定位元素,但flex项和网格项即使position
为static
也可以创建堆叠上下文。
弹性项目的绘制方式与内联块完全相同,只是使用修改后的文档顺序代替原始文档顺序,并且除了auto
以外的z-index
值即使position
为static
,也会创建一个堆叠上下文。
网格项的绘制顺序与内联块完全相同,只是使用修改后的文档顺序代替原始文档顺序,并且除了auto
以外的z-index
值即使position
为static
,也会创建一个堆叠上下文。
这是关于非定位的弹性项目中 z-index
的演示:https://jsfiddle.net/m0wddwxs/
堆叠上下文
一旦元素被定位并应用了 z-index
,就会创建一个堆叠上下文。
(另请参见:创建堆叠上下文的完整情况列表。)
堆叠上下文是管理定位元素和其后代的一组规则,这些规则控制子元素在 堆叠顺序 中的位置和属性影响的范围。
实质上,堆叠上下文将 z-index
的范围限制在元素本身,其子元素不能影响另一个堆叠上下文中元素的堆叠顺序。
如果您曾尝试逐渐增加 z-index
值,但发现该元素从未移至前面,则可能正在尝试覆盖处于不同堆叠上下文中的元素。
具有共同父元素的元素组成了一个层叠上下文,它们可以一起向前或向后移动。全面理解层叠上下文对于真正掌握 z-index 和层叠顺序的工作原理至关重要。
每个层叠上下文都有一个单独的 HTML 元素作为其根元素。当在一个元素上形成新的层叠上下文时,该层叠上下文将所有子元素限制在层叠顺序中的特定位置。这意味着,如果一个元素包含在层叠顺序底部的层叠上下文中,即使使用十亿的 z-index,也无法使其出现在不同层叠上下文中层叠顺序更高的另一个元素的前面!
堆叠顺序
CSS在页面布局时遵循一种堆叠顺序。当没有指定z-index
时,以下是从最远到最近的堆叠规则:
如果应用了z-index
属性,则会修改堆叠顺序:
z-index
小于0的定位元素z-index
大于0的定位元素来源: W3C
z-index
就很容易理解了。
要了解 z-index
的实际应用示例,请参见:如何使用z-index!
有关简短但高度信息化的文章,其中包括有关 z-index
的说明(包括 opacity
如何影响堆叠顺序),请参见:关于Z-Index没有人告诉你的事情
要完整了解 z-index
,包括许多示例和插图,请参见:MDN理解CSSz-index
要深入了解堆叠上下文,请阅读:W3C关于堆叠上下文的详细描述