2021/03/07 - z-index的渲染机制

Question

2021/03/07 - z-index的渲染机制

Opened this issue 5 years ago · 0 comments

1. 在同一个层叠上下文中，z-index的大小不等时，谁大谁在上；相等时，在DOM流中处于后面的元素会覆盖前面的元素

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Stacking without z-index</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style type="text/css">

    div {
        font: 12px Arial;
        text-align: center;
        opacity: 0.7;
    }

    .bold { font-weight: bold; }
    #reldiv1 {
      z-index: 3;
      height: 100px;
      position: relative;
      top: 30px;
      border: 1px dashed #669966;
      background-color: #ccffcc;
      margin: 0px 50px 0px 50px;
    }

    #reldiv2 {
      z-index: 5;
      height: 100px;
      position: relative;
      top: 15px;
      left: 20px;
      border: 1px dashed #669966;
      background-color: #ccffcc;
      margin: 0px 50px 0px 50px;
    }

    #absdiv1 {
      z-index: 4;
      position: absolute;
      width: 150px;
      height: 350px;
      top: 10px;
      left: 10px;
      border: 1px dashed #990000;
      background-color: #ffdddd;
    }

    #absdiv2 {
      z-index: 4;
      position: absolute;
      width: 150px;
      height: 350px;
      top: 10px;
      left: 80px;
      border: 1px dashed #990000;
      background-color: #ffdddd;
    }

    #nordiv1 {
      z-index: 8;
      height: 70px;
      border: 1px dashed #999966;
      background-color: #ffffcc;
      margin: 0px 50px 0px 50px;
    }

</style>
</head>

<body>
  <div id="reldiv1">DIV#1 RELATIVE z-index 3</div>
  <div id="reldiv2">DIV#2 RELATIVE z-index 5</div>
  <div id="absdiv1">DIV#3 ABSOLUTE z-index 4</div>
  <div id="absdiv2">DIV#4 ABSOLUTE z-index 4</div>
  <div id="nordiv1">DIV#5 NORMAL z-index 8</div>
</body>
</html>

2. 如果一个盒子设定了一个position，但没有指定z-index或z-index设置为auto，此时盒子不会创建一个新的本地堆叠上下文，在当前堆叠上下文中生成的盒子的堆叠层级和父级盒子相同

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Stacking without z-index</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style type="text/css">

    div {
        font: 12px Arial;
        text-align: center;
        opacity: 0.7;
    }

    .bold { font-weight: bold; }
    #reldiv1 {
      z-index: 3;
      height: 100px;
      position: relative;
      top: 30px;
      border: 1px dashed #669966;
      background-color: #ccffcc;
      margin: 0px 50px 0px 50px;
    }

    #absdiv1 {
      z-index: 4;
      position: absolute;
      width: 150px;
      height: 350px;
      top: 10px;
      left: 10px;
      border: 1px dashed #990000;
      background-color: #ffdddd;
    }

    #nordiv1 {
      z-index: 8;
      height: 70px;
      border: 1px dashed #999966;
      background-color: #ffffcc;
      margin: 0px 50px 0px 50px;
    }

    .wrap {
      position: relative;
    }

    #wrap-absdiv1 {
      z-index: 99;
      position: absolute;
      width: 250px;
      height: 250px;
      top: 10px;
      left: 80px;
      border: 1px dashed #0829e2;
      background-color: #4e72a8;
    }

</style>
</head>

<body>
  <div id="reldiv1">DIV#1 RELATIVE z-index 3</div>
  <div id="absdiv1">DIV#2 ABSOLUTE z-index 4</div>
  <div id="nordiv1">DIV#3 NORMAL z-index 8</div>
  <section class="wrap">
    <div id="wrap-absdiv1">.wrap DIV#4 ABSOLUTE z-index 99</div>
  </section>
</body>
</html>