为什么我写的z-index不生效? z-index有什么用
lipiwang 2024-10-22 15:43 6 浏览 0 评论
前言
相信大家在工作中都遇到过这样一些奇怪的现象：
1.为什么我写的z-index没有生效？
2.为什么z-index大的元素却没有盖住z-index小的元素？
3.如何让父元素盖住子元素呢？
以上这些问题都跟CSS层叠上下文有关，OK，带着上面这些问题我们一起来了解一下什么是CSS层叠上下文，以及这些奇怪现象背后的原理！
「如果这篇文章有帮助到你，??关注+点赞??鼓励一下作者，文章公众号首发，关注 前端南玖 第一时间获取最新文章～」
什么是CSS层叠上下文？
?
层叠上下文是HTML元素的三维概念，这些HTML元素在一条假想的相对于面向（电脑屏幕的）视窗或者网页的用户的z轴上延伸，HTML元素依据其自身属性按照优先级顺序占用层叠上下文的空间。
?
z轴
在CSS2.1规范中，每个盒模型的位置是三维的，分别是平面画布上的X轴，Y轴以及表示层叠的Z轴。一般情况下，元素在页面上沿X轴Y轴平铺，我们察觉不到它们在Z轴上的层叠关系。而一旦元素发生堆叠，这时就能发现某个元素可能覆盖了另一个元素或者被另一个元素覆盖。
我们可以这样来理解：
- 层叠上下文是HTML元素的三维概念，可以想象为一条垂直于视窗的z轴
- 当元素创建了重叠上下文时，这个元素就有了一个z轴
- 如果内部的子元素发生重叠，会依据自身属性优先级顺序占用z轴（重叠上下文）上的空间
- 优先级最大的元素排在最上面，离用户也最近
如何产生层叠上下文?
了解了层叠上下文，我们还要知道层叠上下文是如何产生的。
一般来讲有3种方法：
- html中的根元素<html></html>本身就是层叠上下文，成为根层叠上下文
- position属性为「非」static值并设置z-index属性为具体数值
- 一些CSS3属性也能产生层叠上下文 一个 flex 元素(flex item)，且 z-index 值不为 “auto”，也就是父元素 display: flex|inline-flex元素的 opacity 属性值小于 1元素的 transform 属性值不为 “none”元素的 mix-blend-mode 属性值不为 “normal”元素的 isolation 属性被设置为 “isolate”在 mobile WebKit 和 Chrome 22+ 内核的浏览器中，position: fixed 总是创建一个新的层叠上下文, 即使 z-index 的值是 “auto”在 will-change 中指定了任意 CSS 属性，即便你没有定义该元素的这些属性元素的 -webkit-overflow-scrolling 属性被设置 “touch”
层叠等级与层叠顺序
层叠等级
?
层叠等级(stacking level，叫“层叠级别”/“层叠水平”也行)，它决定了「同一个层叠上下文中元素在z轴上的显示顺序（层叠顺序）」，也就是说普通元素的层叠水平优先由层叠上下文决定。
?
层叠顺序
?
“层叠顺序”英文称作”stacking order”. 表示元素发生层叠时候有着特定的垂直显示顺序，注意，这里跟上面两个不一样，上面的「层叠上下文和层叠水平是概念」，而这里的「层叠顺序是规则」。
?
从上面产生层叠上下文的方法，我们可以分为CSS2.1与CSS3两类，在CSS3出来之前，相信大家都看过下面这张图：
看到这张图，相信大家最有疑问的是「行内元素的层叠顺序要高于块级元素与浮动元素」。
OK，有疑问就动手实践一遍，看看是不是真是这样：
<style>
div {
width: 100px;
height: 100px;
border: 1px solid saddlebrown;
}
.box1 {
position: relative;
z-index: -1;
background: violet;
}
.box2 {
margin-top: -50px;
margin-left: 50px;
background: salmon;
}
.box3 {
float: left;
margin-top: -50px;
margin-left: 100px;
background: wheat;
}
.box4 {
display: inline-block;
background: greenyellow;
margin-left: -50px;
}
.box5 {
position: relative;
z-index:0;
left: 200px;
top: -50px;
background: palevioletred;
}
.box6 {
position: relative;
z-index: 1;
left: 250px;
top: -100px;
background: gold
}
</style>
</head>
<body>
<div class="box1">1定位z-index<0</div>
<div class="box2">2块级元素</div>
<div class="box3">3浮动</div>
<div class="box4">4行内元素</div>
<div class="box5">5定位z-index=0</div>
<div class="box6">6定位z-index>0</div>
</body>
行内元素的层叠顺序为什么要高于块级元素与浮动元素
这个理解起来其实很简单，像border/background属于装饰元素的属性，浮动和块级元素一般用来页面布局，而内联元素一般都是文字内容，并且网页设计之初最重要的就是文字内容，所以在发生层叠时会优先显示文字内容，保证其不被覆盖。
层叠顺序规则
- 谁大谁上：当具有明显的层叠水平标示的时候，比如说z-index值，在同一个层叠上下文领域，层叠水平值大的覆盖小的
- 后来居上：当元素的层叠水平一致、层叠顺序相同的时候，在DOM流中处于后面的元素会覆盖前面的元素。
z-index
?
z-index 属性设定了一个定位元素及其后代元素或 flex 项目的 z-order。当元素之间重叠的时候，z-index 较大的元素会覆盖较小的元素在上层进行显示。
?
属性值
- auto: 默认值，当前值与父级相同
- <integer>: 整型数字
基本特性
- z-index 属性允许为负值。
- z-index 属性支持 CSS3 animation 动画。
- 在 CSS 2.1 的时候，需要配合 position 属性且值不为 static 时使用。
解惑
了解完上面这些内容，现在我们再来看一看前文提到的两个问题
1.为什么我写的z-index没有生效？
这个很简单，因为它单独使用时不生效，一定要配合定位属性一起，即只对指定了position属性的元素生效——只要不是默认值static，其他的absolute、relative、fixed都可以使z-index生效。(在CSS3之后，弹性元素的子元素也可以生效)
2.为什么z-index大的元素却没有盖住z-index小的元素？
这里我们可以来看一个有趣的现象
<style>
.box1 {
width: 200px;
height: 100px;
background: red;
}
.box2 {
width: 100px;
height: 200px;
background: greenyellow;
}
</style>
<div style="position:relative; z-index:auto;">
<div style="position:absolute; z-index:2;" class="box1">box1--z-index=2</div>
</div>
<div style="position:relative; z-index:auto;">
<div style="position:relative; z-index:1;" class="box2">box2--z-index=1</div>
</div>
这么看还挺正常的，z-index值大的在z-index值小的上方。接下来我们稍微改一改，你就能看到奇怪的现象了
<div style="position:relative; z-index:0;">
<div style="position:absolute; z-index:2;" class="box1">box1--z-index=2</div>
</div>
<div style="position:relative; z-index:0;">
<div style="position:relative; z-index:1;" class="box2">box2--z-index=1</div>
</div>
这里我们只是把它们父元素的z-index属性从auto改成了0，两种情况的表现却截然相反。
产生这种现象的原因我们也能够从上面的理论中找到答案：**position属性为「非」static值并设置z-index属性为具体数值才能产生层叠上下文**
当z-index为auto时，是一个普通元素，两个box层比较不受父级的影响，按照规则谁大谁上，于是z-index为2的box覆盖值为1的box； 当z-index为0时，会创建一个层叠上下文，此时的层叠规则就发生了变化。层叠上下文特性里最后一条规则，每个层叠上下文都是独立的。两个box的层叠顺序比较变成了优先比较其父级层叠上下文元素的层叠顺序。由于两者z-index都是0，所以，遵循层叠规则后来居上，根据在DOM出现的先后顺序决定谁在上面，于是，位于后面的box2覆盖box1。此时box元素上的z-index是没有任何意义的。
3.如何让父元素盖住子元素？
这里很多人是不是认为直接让父元素的z-index大于子元素的z-index不就好了，可事实真是如此吗？
<style>
.outer {
position: relative;
width: 100px;
height: 200px;
background: salmon;
z-index: 3;
}
.inner {
position: relative;
width: 50px;
height: 200px;
background: cadetblue;
z-index: 1;
}
</style>
<div class="outer">
父元素
<div class="inner">子元素</div>
</div>
有人是不是又有疑惑了？
我们这样来理解，父元素定位+z-index为数值，所以它产生了一个层叠上下文，此时子元素无论怎么设置z-index都不可能在父元素的下方。唯一可以实现的方法是将子元素的z-index设为负值，而父元素只要不产生层叠上下文就可以了。
<style>
.outer {
position: relative;
width: 100px;
height: 200px;
background: salmon;
/**z-index: 3;**/
}
.inner {
position: relative;
width: 50px;
height: 200px;
background: cadetblue;
z-index: -1;
}
</style>
<div class="outer">
父元素
<div class="inner">子元素</div>
</div>
总结
- 层叠上下文的层叠水平要比普通元素高
- 层叠上下文可以嵌套，内部层叠上下文及其所有子元素均受制于外部的层叠上下文
- 每个层叠上下文不会影响它的兄弟元素，当进行层叠变化或渲染的时，只和该元素的后代元素有关
- 每个层叠上下文是独立的，当元素发生层叠的时，它的层叠顺序依赖在父层叠上下文的层叠顺序中
「其余规则看上面层叠顺序的图即可。」
相关推荐
- 如何在 Linux 中压缩文件和目录?（linux压缩文件夹到指定目录）
-
在Linux系统中，文件和目录的压缩是一项常见且重要的操作。无论是为了节省存储空间、便于文件传输，还是进行备份管理，掌握压缩技术都能极大地提升工作效率。Linux中常用的压缩工具1.tar：打...
- 什么是LIM模具?与普通硅胶模具有何本质区别?
-
要深入理解LIM模具及其与普通硅胶模具的本质区别，需从成型逻辑、技术架构、应用价值三个层面拆解，以下是系统性解析：一、LIM模具：定义与核心技术1.定义LIM模具（LiquidInj...
- 前后端安全机制（前后端分离安全的token）
-
一、密钥安全管理方案1.动态密钥分发机制密钥与会话绑定后端为每个用户会话生成临时密钥（如AES-256密钥），通过HTTPS加密传输给前端，会话结束后自动失效。例如：javascript//...
- Switch 2芯片细节曝光，英伟达专门定制支持DLSS，网友:掌机模式相当于PS4
-
Switch2处理器，细节被实锤！数毛社（DigitalFoundry）消息，已经确定Switch2采用的是英伟达真·定制版芯片，包含8核CPU和12GBLPDDR5X内存。GPU则基于Amp...
- 独立站的PageSpeed Insights 指标在seo中的作用?
-
这是一个非常关键的问题，关于独立站（如Shopify、WordPress、自建FastAPI/Vue等网站）的PageSpeedInsights指标（Google的网页性能评分工具）在...
- 前端工程化-webpack 分包的方式有哪些?
-
Webpack的分包（CodeSplitting）是优化应用性能的重要手段，主要通过合理拆分代码减少首次加载体积、提升缓存利用率。以下是常见的分包方式及生产/开发环境配置建议：一、Webpack...
- 液态硅胶(LSR)套啤注塑件的关键技术难点与解决方案?
-
液态硅胶（LSR）套啤注塑件（即二次注塑成型，一次成型基材+二次LSR包胶）在医疗、电子、汽车等领域应用广泛，但其关键技术难点需从材料、模具、工艺等多维度突破。以下是核心难点及解决方案：一、关...
- spa首屏加载慢怎样解决（spa首屏优化）
-
SPA（SinglePageApplication，单页应用）首屏加载慢是一个常见问题，主要原因通常是首次加载需要拉取体积较大的JavaScript文件、样式表、初始化数据等。以下是一些常见的...
- 揭秘|为什么新华三(H3C)要自主研发运维管理软件?
-
1概述1.1产生背景随着互联网技术的快速发展，企业对计算、网络的需求也越来越大。为了保证整个数据系统可靠、稳定地运行，相关企业对运维系统的要求越来越高，运维成本也在随之逐步增加。H3C公司自主研发的运...
- 动态主机配置协议——DHCP详解（dhcp动态主机配置协议的功能是?）
-
一、DHCP简介DHCP(DynamicHostConfigurationProtocol),动态主机配置协议，是一个应用层协议。当我们将客户主机ip地址设置为动态获取方式时，DHCP服务器就会...
- OGG同步到Kafka（oggforbigdata到kafka）
-
目的：测试使用OGG将数据单向同步到Kafka上。简要说明：Kafka使用单节点单Broker部署；单独部署简单ZooKeeper；需要使用到JAVA1.8；OGG需要2个版本，一个fororacl...
- Zabbix入门操作指南（zabbix4.0使用手册）
-
上篇：安装与配置一.概述在开始之前，一些概念和定义需要我们提前了解一下（以下内容摘自官方网站）。1.1几个概念架构Zabbix由几个主要的功能组件组成，其职责如下所示。ServerZabbixs...
- 绝对干货!升级MySQL5.7到MySQL8.0的最佳实践分享
-
一、前言事出必有因，在这个月的某个项目中，我们面临了一项重要任务，即每年一次的等保测评整改。这次测评的重点是Mysql的一些高危漏洞，客户要求我们无论如何必须解决这些漏洞。尽管我们感到无奈，但为了满足...
- pytorch v2.7.0震撼发布!Blackwell GPU支持+编译性能狂飙，AI开发
-
重点内容测试版（Beta）：oTorch.Compile支持Torch函数模式oMega缓存原型（Prototype）：o支持NVIDIABlackwell架构oPyTorch...
- kubernetes1.31.3集群搭建(上)（kubectl连接集群）
-
1集群规划1.1物理机环境电脑操作系统CPU内存硬盘网卡IP地址（静态）虚拟机软件服务器操作系统联想Windows11Intel12900K24核128GB4TBPcIE4.0无线网卡192...
欢迎 你 发表评论:
- 一周热门
- 最近发表
- 标签列表
-
- maven镜像 (69)
- undefined reference to (60)
- zip格式 (63)
- oracle over (62)
- date_format函数用法 (67)
- 在线代理服务器 (60)
- shell 字符串比较 (74)
- x509证书 (61)
- localhost (65)
- java.awt.headless (66)
- syn_sent (64)
- settings.xml (59)
- 弹出窗口 (56)
- applicationcontextaware (72)
- my.cnf (73)
- httpsession (62)
- pkcs7 (62)
- session cookie (63)
- java 生成uuid (58)
- could not initialize class (58)
- beanpropertyrowmapper (58)
- word空格下划线不显示 (73)
- jar文件 (60)
- jsp内置对象 (58)
- makefile编写规则 (58)