理解 CSS 的 z-index 属性

cangck_X 发布于2019-08-28 17:51 / 2418人阅读

摘要：通常认为页面是二维的，但实际上，还有一个属性，允许层叠元素。所有的盒模型元素都处于三维坐标系中。多个元素的属性相同时，将按照上文描述的顺序布局。使用排序的例子注意，的无效，因为未指定属性。每个堆叠上下文和它的同级上下文是独立的。

通常认为HTML页面是二维的，但实际上，CSS还有一个z-index属性，允许层叠元素。

所有的盒模型元素都处于三维坐标系中。除了我们常用的横坐标和纵坐标，盒模型元素还可以沿着“z轴”层叠摆放，当他们相互覆盖时， z轴顺序就变得十分重要。

-- CSS 2.1 Section 9.9.1 - Layered presentation

默认的摆放规则

假定元素没有指定z-index属性，那么元素按照如下顺序叠放（从底到顶）

根元素的背景和边界

普通流(无定位)里的块元素(没有position或者position:static;)按HTML中的出现顺序堆叠

定位元素按HTML中的出现顺序堆叠

浮动

对于浮动的块元素来说，堆叠顺序变得有些不同。浮动块元素被放置于非定位块元素与定位块元素之间：

根元素的背景与边框

位于普通流中的后代块元素按照它们在 HTML 中出现的顺序堆叠

浮动块元素

常规流中的后代行内元素

后代中的定位元素按照它们在 HTML 中出现的顺序堆叠

使用 z-index

如果需要改变默认的摆放顺序，只需给元素指定z-index。z-index必须是整数，体现了元素在z轴的位置：

底层：距离观察者最远

……

-3 层

-2 层

-1 层

0 层（默认）

1 层

2 层

3 层

……

顶层：最接近观察者

没有指定z-index的时候，所有元素默认在0层渲染。多个元素的z-index属性相同时，将按照上文描述的顺序布局。

使用z-index排序的例子：

注意，div#5的z-index无效，因为未指定position属性。

堆叠上下文

指定z-index属性将构造一个堆叠上下文。

以下元素构成堆叠上下文指：

根元素html

定位元素，且其z-index值不为auto

opacity小于1的元素

在移动WebKit、Chrome22+以上，指定position: fixed的元素总是会构造堆叠上下文，即使z-index为auto。

堆叠上下文中的子元素按照前述顺序摆放。堆叠上下文内部的子堆叠上下文的z-index只在父堆叠上下文中有意义。

总而言之：

z-index不为auto，opacity小于1的元素会构建堆叠上下文。

堆叠上下文可以嵌入其他堆叠上下文。

每个堆叠上下文和它的同级上下文是独立的。

每个堆叠上下文是自包含的。

原文 Understanding CSS z-index
节译 SegmentFault

私有云专线服务 Z-Index属性 css属性访问CSS属性 position属性，css

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/110841.html

【学习笔记】CSS深入理解之z-index

摘要：张鑫旭的深入理解之学习笔记层叠上下文什么是层叠上下文在轴上延伸出一个层级，离父级层叠上下文的顶部更近。遵循后来居上和谁大谁上的层叠原则。张鑫旭的CSS深入理解之z-index学习笔记层叠上下文什么是层叠上下文？在z轴上延伸出一个层级，离父级层叠上下文的顶部更近。如何产生层叠上下文？根元素具有根层叠上下文 z-index不为auto的定位元素一个 z-index 值不为 ...

Steven 2019-08-30 15:54 评论0 收藏0
彻底搞懂CSS层叠上下文、层叠等级、层叠顺序、z-index

摘要：栗子有两个，被包裹在一个里，被包裹在另一个盒子里，同时为两个和设置和属性效果我们发下，虽然元素的值为，远大于和的值，但是由于的父元素产生的层叠上下文的的值为，的父元素所产生的层叠上下文的值为，所以永远在和下面。前言最近，在项目中遇到一个关于CSS中元素z-index属性的问题，具体问题不太好描述，总结起来就是当给元素和父元素色设置position属性和z-index相关属性后，页面...

Steve_Wang_ 2019-08-29 16:35 评论0 收藏0
彻底搞懂CSS层叠上下文、层叠等级、层叠顺序、z-index

摘要：栗子有两个，被包裹在一个里，被包裹在另一个盒子里，同时为两个和设置和属性效果我们发下，虽然元素的值为，远大于和的值，但是由于的父元素产生的层叠上下文的的值为，的父元素所产生的层叠上下文的值为，所以永远在和下面。前言最近，在项目中遇到一个关于CSS中元素z-index属性的问题，具体问题不太好描述，总结起来就是当给元素和父元素色设置position属性和z-index相关属性后，页面...

Donne 2019-08-23 11:36 评论0 收藏0
彻底搞懂CSS层叠上下文、层叠等级、层叠顺序、z-index

摘要：栗子有两个，被包裹在一个里，被包裹在另一个盒子里，同时为两个和设置和属性效果我们发下，虽然元素的值为，远大于和的值，但是由于的父元素产生的层叠上下文的的值为，的父元素所产生的层叠上下文的值为，所以永远在和下面。前言最近，在项目中遇到一个关于CSS中元素z-index属性的问题，具体问题不太好描述，总结起来就是当给元素和父元素色设置position属性和z-index相关属性后，页面...

liuchengxu 2019-08-05 14:50 评论0 收藏0
CSS 层叠上下文（Stacking Context）

摘要：当第二层的容器盒子升级为层叠上下文时，红色盒子及灰色盒子的轴层级受制于第二层的容器盒子。当元素处于同一层叠上下文内时可按照如下规则进行层叠判断。本文首发于政采云前端团队博客：CSS 层叠上下文（Stacking Context）在网页制作的过程中，元素与元素之间的位置关系，在坐标轴上一般可体现为 X 轴、Y 轴和 Z 轴。对于 X 轴和 Y 轴的定位大多数开发都能比较直观的搞清楚...

marek 2019-08-30 15:44 评论0 收藏0