元素层级z-index解析

z-index元素层级解析

关于元素定位可以参照前文：https://www.cnblogs.com/wzx-blog/p/15659373.html

对于开启了定位元素；

可以通过z- index属性来指定元素的层级
z-index需要一个整数作为参数，值越大元素的层级越高
元素的层级越高越优先显示

如果元素的层级一样，则优先显示靠下的元素
祖先的元素的层级再高也不会盖住后代元素

可选值；任意整数

实例：

       .c1,.c2,{
                width: 100px;
                height: 100px;
            }
            .c1{
                position: relative;
                left: 10px;
                top: 10px;
            }
            .c2{
                position: relative;
                left: 20px;
                bottom: 20px;
            }
<div class="c1" style="background-color:coral; z-index: 1;">C1</div>
<div class="c2" style="background-color:cornflowerblue; z-index: 0;">C2</div>

两个块开启相对定位；元素层级高者，显示在上层。

---

​

.c1,.c2{
     width: 100px;
     height: 100px;
       }
.c1{
   position: relative;
   left: 10px;
   top: 10px;
    }
.c2{
   position: relative;
   left: 20px;
   bottom: 20px;
    }
<div class="c1" style="background-color:coral; z-index: 0;">C1</div>
<div class="c2" style="background-color:cornflowerblue; z-index: 0;">C2</div>

两个块开启相对定位；如果元素层级相同，则下方元素显示在上层。

---

.c1,.c2,.c3{
                width: 100px;
                height: 100px;
            }
            .c1{
                position: relative;
                left: 50px;
                top: 20px;
            }
            .c2{
                position: relative;
                left: 20px;
                bottom: 20px;
            }
            .c3{
                position:absolute;
                left: 20px;
                top: 10px;

            }

<div class="c1" style="background-color:coral; z-index: 1;">C1</div>
<div class="c2" style="background-color:cornflowerblue; z-index: 0;">C2</div>
<div class="c3" style="background-color:cyan;z-index:0;">C3</div>

c1,c2开启相对定位，c3开启绝对定位（脱离文档流），即使c2,c3的元素层级相同，c3也在c2的上层；

而元素层级更高的c1在最上层。

---

c4,.d1{
        width: 100px;
        height: 100px;
       }
.c4{
         position: relative;
         top: 10px;
    }
.d1{
          position: relative;
          top: 10px;
          left: 10px;
    }
<div class="c4" style="background-color:darkseagreen; z-index: 5;">C4
    <div class="d1" style="background-color:darkorchid; z-index: 2;">D1</div>
</div>

c4,d1开启相对定位，即使c4的元素层级比d1高，也不会盖住d1；及祖先的元素的层级再高也不会盖住后代元素。

---

 .c1,.c2,.c3,.c4,.d1{
                width: 100px;
                height: 100px;
            }
            .c1{
                position: relative;
                left: 10px;
                top: 20px;
            }
            .c2{
                position: relative;
                left: 30px;
                bottom: 40px;
            }
            .c3{
                position: relative;
                left: 50px;
                bottom: 100px;

            }
          .c4{
            position: relative;
            bottom: 190px;
          }
          .d1{
            position: relative;
            top: 10px;
            left: 10px;
          }
<div class="c1" style="background-color:coral; z-index: 1;">C1</div>
<div class="c2" style="background-color:cornflowerblue; z-index: 2;">C2</div>
<div class="c3" style="background-color:cyan;z-index:3;">C3</div>
<div class="c4" style="background-color:darkseagreen; z-index: 5;">C4
    <div class="d1" style="background-color:darkorchid; z-index: -1;">D1</div>
</div>

子元素的层级是相对于祖先元素而论的，就比如d1的元素层级没有c1,c2,c3高，但是d1的祖先元素c4层级高于c1,c2,c3。所以d1依旧会显示在c1,c2,c3的上层。