深入理解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(紫色)上面。这说明母并没有凭子贵啊????