欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

深入理解css中z-index属性

程序员文章站 2022-05-28 11:07:57
...

今天看到一个面试题,当position和z-index属性同时设置时,到底哪个在上哪个在下呢?

首先声明:z-index只能在position属性值为relative、absolute或fixed的元素上有效。
基本原理是:z-index的值可以控制定位元素在垂直于显示屏幕方向(z轴)上的堆叠顺序(stack order),值大的元素发生重叠时会在值小的元素上面。
案例一
假设son1和son2是father的子元素,代码和效果图如下:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style>
  .father {
    position: relative;
    width: 300px;
    height: 300px;
    background-color: pink;
  }

  .son1 {
    position: absolute;
    top: 50px;
    left: 50px;
    width: 100px;
    height: 100px;
    background-color: green;
  }

  .son2 {
    position: absolute;
    top: 80px;
    left: 80px;
    width: 100px;
    height: 100px;
    background-color: blue;
  }
</style>
<body>
  <div class="father">
    <div class="son1"></div>
    <div class="son2"></div>
  </div>
</body>
</html>

深入理解css中z-index属性
ps. son1(绿色) son2(蓝色) father(粉色)
在没有使用z-index时,son2(蓝色) 在son1(绿色)之上,这是因为son2(蓝色)在html中排在了son1(绿色)之后,后来者居上,如果我们颠倒一下两者在html中的顺序,就会发现son1(绿色)在上了。

案例二
在son1(绿色) 中加入z-index: 1;可以发现效果如下:
深入理解css中z-index属性
也就是说,son2(蓝色)的index值是小于1的。
如果在son2(蓝色)中同样加上z-index: 1;,就会发现son2(蓝色)重新跑到了son1(绿色)上面,也就是说此时和没有加上z-index: 1;的情况是一样的。

案例三
给father元素添加z-index: 5;,得到结果如下:
深入理解css中z-index属性
son1和son2的index值为1,father的index值为10,可是father并没有跑到son1和son2上面。
也就是说,父元素不和子元素比较index值,可是,真的是这样吗?

案例四
把两个子元素的z-index值同时设置为-5;父元素不设置z-index属性。结果如下:
深入理解css中z-index属性
这说明在父元素和子元素之间还是可以作比较的,只是需要我们把子元素的z-index值设为负数。

案例五
我们在案例四的基础上再给父元素添加一个z-index:5,结果如下:
深入理解css中z-index属性
son1和son2的index值为-5,father的index值为5,可是,son1和son2却在father上面!也就是说father不能添加index值,否则会导致错误。

案例六
今天看到的面试题,代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style>
  .father1 {
    z-index: 10;
    position: absolute;
    left: 50px;
    width: 300px;
    height: 300px;
    background-color: pink;
  }

  .father2 {
    z-index: 5;
    position: absolute;
    left: 100px;
    width: 300px;
    height: 300px;
    background-color: purple;
  }

  .son1 {
    position: absolute;
    top: 50px;
    left: 50px;
    width: 100px;
    height: 100px;
    background-color: green;
  }

  .son2 {
    position: absolute;
    top: 50px;
    left: 50px;
    width: 100px;
    height: 100px;
    background-color: blue;
  }
</style>
<body>
  <div class="father1">
    <div class="son1"></div>
  </div>
  <div class="father2">
    <div class="son2"></div>
  </div>
</body>
</html>

结果图如下:
深入理解css中z-index属性
father1和father2分别是son1和son2的父元素父元素是不可添加z-index值的,否则会导致错误。但是这里father1和father2是同级的,所以就可以进行比较了。father1的index值大于father2的index值,所以father1(粉色)在father2(紫色)上面,且此时father1的子元素son1(绿色)在上。

案例七
如果此时我们在案例六的基础上,把father2的z-index值设为20,就会发现如下效果:
深入理解css中z-index属性
father2(紫色)在father1(粉色)上面的同时,它的子元素son2(蓝色)也会同时在上。这也就是所谓的“拼爹”了!!

案例八
同样在案例六的基础上,如果我们不设置father1、father2和son2的index值,只设置son1(绿色)的z-index值为10,效果如下:
深入理解css中z-index属性
原本在下面的son1(绿色)跑到了son2(蓝色)上面,可是son1的父元素father1(粉色)并没有跑到son2的父元素father2(紫色)上面。这说明母并没有凭子贵啊????

案例九
在案例八的基础上,如果把son2的index值设置为20,那么son2(蓝色)就会覆盖son1(绿色)了,效果图如下:
深入理解css中z-index属性
案例十
如果我们将son1和son2的index值都设置为-5,那么两者就都会被父元素所覆盖,效果图如下:
深入理解css中z-index属性

总结:

  1. 同一级的元素可以比较z-index值;
  2. 若子元素的z-index值变大,父元素并不会一起增大;
  3. 若父元素的z-index值变大,子元素的z-index值则会一起增大;
  4. 若子元素z-index值设置为负值,父元素没有z-index值,则父元素会覆盖子元素;
  5. 若子元素z-index值设置为负值,父元素设置z-index值,则会导致错误,子元素依旧在父元素上面。
相关标签: css