上帝视角，元素上天下地无所不能，静观其变 ——论 z-index 。

最新推荐文章于 2024-08-29 09:15:41 发布

笑颜の行方

最新推荐文章于 2024-08-29 09:15:41 发布

阅读量170

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/weixin_43847418/article/details/99656586

本文详细解析了CSS中z-index属性的作用机制，通过实例演示如何使用z-index调整网页元素的堆叠顺序，实现元素在二维平面上的前后层叠效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

大家好，这里是笑颜の行方。
本篇描述的是，z-index。

z-index是什么？

二维坐标有两个轴，x和y。
三维呢？比起二维，多出一个z。

页面通常是二维平面的。
页面的X轴和Y轴
X轴从页面左上角，向右方，X的像素值增加，反之减少。
Y轴从页面左上角，向下方，Y的像素值增加，反之减少。

那么Z轴在哪里？
嗯……
页面的Z轴
Z轴在页面上就是这样的。我们平常只看到X和Y，
Z的话，就是显示器发向眼睛的光线(笑)。

由于我们看着显示器，其实是上帝视角，所以先介绍一下三维坐标。

上天下地，需要更改的是元素的哪一项属性？
Z的大小。

接下来，我们来看看z-index如何改变元素所处位置的Z值。

定位X和Y需要参照。 参照需要的首要条件是什么？
—— position。

接下来，先定义页面的元素：

<body>
  <div class="a1"></div>
  <div class="a2"></div>
  <div class="a3"></div>
</body>

div{
    width: 100px;
    height: 100px;
    position: absolute;
  }
  .a1{
    background-color: #f00;
  }
  .a2{
    background-color: #0f0;
    top: 50px;
  }
  .a3{
    background-color: #00f;
    left: 50px;
  }

三个元素互相重叠
解读一下：
定义三个块元素，class分别是a1,a2,a3
宽高统一100像素，设置为绝对定位，如没有设置，则 z-index 不会有效果。
背景色分别设为光的三原色 —— 红、绿、蓝。
红色块原地不动，绿色块离页面顶部50像素，
蓝色块离页面左边框50像素。

这时我们看到，蓝色块在最上面。 为啥呢？还没有设置z-index呢。
嗯……因为蓝色块的样式是最后加载出来的，所以显示在最上面。

添加以下样式：

.a1{
    z-index:1;
  }

红块完全显示
我们更改红色块的Z值，像是浮上来一样，遮住了蓝色块与绿色块。

绿色块不服气：

.a2{
    z-index: 2;
  }

绿色的Z值更改为2，比红色块的1高。
绿色块浮上来
绿色块完全显示出来了，遮住了蓝色块与红色块。

z-index可更改元素显示的优先级，用起来就是这么简单，大家学会了吗？