你真的了解z-index吗?z-index为什么有时候会失效?

概念

z-index属性设置定位元素及其后代元素或 flex 项目的 Z 轴顺序。z-index 较大的重叠元素会覆盖较小的元素。

使用场景

DOM元素被遮盖住了,需要z-index元素提升该DOM的层级

失效场景

1、给非定位元素设置

z-index 属性只对定位元素有效,即具有 position 属性值为 relativeabsolutefixed 的元素。这些元素会脱离文档流,并且它们的堆叠顺序可以通过 z-index 属性进行控制。

举例:这段代码是第三个盒子盖住了第二个盒子,第二个盖住了第一个。

效果如下:

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .dom {
      width: 100px;
      height: 100px;
      border: 2px solid black;
    }
    .dom1 {
      background-color: red;
      z-index: 999;
    }
    .dom2 {
      background-color: green;
      margin-top: -50px;
    }
    .dom3 {
      background-color: blue;
      margin-top: -50px;
    }
  </style>
</head>
<body>
  <div class="dom dom1"></div>
  <div class="dom dom2"></div>
  <div class="dom dom3"></div>
</body>
</html>

若是我们想实现相反的覆盖,即第一个盖住第二个,第二个盖住第三个,那么就可以使用z-index

想实现的效果如下:

此时的处理逻辑即给第一个盒子z-index:3,第二个z-index:2,第三个z-index:1,同时需要注意生效条件,加个定位.

代码如下:

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .dom {
      width: 100px;
      height: 100px;
      border: 2px solid black;
    }
    .dom1 {
      background-color: red;
      z-index: 3;
      position: relative;
    }
    .dom2 {
      background-color: green;
      margin-top: -50px;
      z-index: 2;
      position: relative;
    }
    .dom3 {
      background-color: blue;
      margin-top: -50px;
      z-index: 1;
      position: relative;
    }
  </style>
</head>
<body>
  <div class="dom dom1"></div>
  <div class="dom dom2"></div>
  <div class="dom dom3"></div>
</body>
</html>

2、给父子元素设置

代码如下:

js 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Opacity 属性创建新的层叠上下文示例</title>
<style>
  .parent {
    position: relative;
    width: 200px;
    height: 200px;
    background-color: #f00;
    z-index: 9999; /* 提高父元素的 z-index */
  }
  .child {
    position: relative;
    width: 100px;
    height: 100px;
    background-color: #00f;
    z-index: 1;
  }
  .grandchild {
    position: absolute; /* 将 position 改为 absolute */
    width: 50px;
    height: 50px;
    background-color: #0f0;
  }
</style>
</head>
<body>

<div class="parent">
  <div class="child">
    <div class="grandchild"></div>
  </div>
</div>

</body>
</html>

此时已经给父元素设置成了z-index: 9999;,父元素依然在最下面:

3、设置了transform、opcity等属性

某些 CSS 属性或值会创建新的层叠上下文,这可能影响元素的层叠顺序

但是这里的影响并不是真正的影响到了层级,而是让开发者肉眼看可能影响了层级。

举例:

比如:这里给div加上opacity: 0.1

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .dom {
      width: 100px;
      height: 100px;
      border: 2px solid black;
    }
    .dom1 {
      background-color: red;
      z-index: 999;
    }
    .dom2 {
      background-color: green;
      margin-top: -50px;
      opacity: 0.1; /* 设置属性 */
    }
    .dom3 {
      background-color: blue;
      margin-top: -50px;
    }
  </style>
</head>
<body>
  <div class="dom dom1"></div>
  <div class="dom dom2"></div>
  <div class="dom dom3"></div>
</body>
</html>

就会从

变为

看起来层级发生了变化

4、层级冲突

在实际应用场景中,我们可能会因为各种情况,设置很多的z-index,此时就会造成层级混乱,遇到层级冲突的问题,给不同层级的盒子设置成了同样的z-index。

5、设置浮动

比如:这段代码,我们分别给三个盒子设置 z-index: 1;z-index: 2;z-index: 3;

正常情况应当是,蓝色盖绿色,绿色盖红色

但是由于加上了浮动,倒是层级变为:

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .dom {
      position: relative;
      width: 100px;
      height: 100px;
      border: 2px solid black;
    }
    .dom1 {
      background-color: red;
      z-index: 1;
    }
    .dom2 {
      background-color: green;
      margin-top: -50px;
      z-index: 2;
      float: left; /* 改变了层级 */
    }
    .dom3 {
      background-color: blue;
      margin-top: -50px;
      z-index: 3;
    }
  </style>
</head>
<body>
  <div class="dom dom1"></div>
  <div class="dom dom2"></div>
  <div class="dom dom3"></div>
</body>
</html>

6、不支持的 z-index 值

z-index 只接受整数值,如果使用其他类型的值,可能会导致 z-index 失效

相关推荐
冴羽21 分钟前
SvelteKit 最新中文文档教程(17)—— 仅服务端模块和快照
前端·javascript·svelte
uhakadotcom23 分钟前
Langflow:打造AI应用的强大工具
前端·面试·github
前端小张同学32 分钟前
AI编程-cursor无限使用, 还有谁不会🎁🎁🎁??
前端·cursor
yanxy51236 分钟前
【TS学习】(15)分布式条件特性
前端·学习·typescript
uhakadotcom1 小时前
Caddy Web服务器初体验:简洁高效的现代选择
前端·面试·github
前端菜鸟来报道1 小时前
前端react 实现分段进度条
前端·javascript·react.js·进度条
花楸树2 小时前
前端搭建 MCP Client(Web版)+ Server + Agent 实践
前端·人工智能
wuaro2 小时前
RBAC权限控制具体实现
前端·javascript·vue
专业抄代码选手2 小时前
【JS】instanceof 和 typeof 的使用
前端·javascript·面试