css中的z-index层级问题

css中z-index层级问题

一、css盒子模型的布局提供三种不同的定位方案

①正常文档流

②浮动

③定位

第三种定位会将元素从正常文档流中完全移走，前端开发人员通过设置top、bottom、left、right在二维空间进行定位。

Z-index允许开发人员在三维空间进行定位

二、z-index基础

x轴代码水平方向，y轴代表垂直方向，z轴代表目光平视的方向，看进去屏幕里面这个方向。

开发的页面是二维空间，z轴是透视的。

规定：两个元素共享同一个二维开发空间块，z-index值大的会覆盖小的。想象一下，z 延申方向是朝着我们目光的方向无线延申，是不是大的轴上的会覆盖小的轴上的（想象一下）

z-index的三个值

auto（）	堆叠顺序与父级相同
number 数字表示堆叠顺序大小	可以负整数、0、正整数
inherit 继承	继承父元素的层级

三、层叠上下文

在目光透视z轴上的html元素的一个三维构想，叫做层叠上下文。

层叠上下文的层级是HTML层级的一个子级。

四、层叠七等级

上下文，有上下，就是有父元素子元素，子元素只有在父元素里面才有意义。（没有父亲哪来儿子）子级的z-index只有在父元素中才有意义。排序，从低到高。

等级	层级元素
1	背景和边框：形成层叠上下文的背景和边框
2	负整数：z-index为负整数的子元素，以及由它产生的层叠上下文
3	块级盒子模型：位于正常文档流中、块级的、非定位的子元素
4	浮动盒子模型：浮动的、非定位的子元素
5	内联盒子模型：位于正常文档流中、内联的、非定位的子元素
6	0：z-index为0的，定位的子元素以及由它产生的层叠上下文
7	正整数：z-index为正整数、定位的子元素以及由它产生的层叠上下文

五、栗子

层级上下文可以包含在其他层叠上下文中，并且一起创建一个层叠上下文

每个层叠上下文独立于它的兄弟元素：当处理层只考虑子元素

每个层叠上下文都是自包含：一个元素的内容发生层叠，该元素将被作为整体，在父级层级上下文按顺序进行折叠

没有创建层级上下文会被父层叠上下文同化

误解：z-index越大并不代表显示在z-index越小的前面，比如下面的栗子

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatialbe" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>z-index</title>
    <style>
            div {
            padding: 20px;
        }

        .one,
        .two,
        .three,
        .four {
            position: absolute;
            font-size: 20px;
        }

        .one {
            background-color: pink;
            width: 400px;
            height: 400px;
            top: 100px;
            left: 200px;
            z-index: 10;
        }

        .two {
            background-color: rgb(115, 216, 182);
            width: 200px;
            height: 200px;
            top: 50px;
            left: 50px;
            z-index: 100;
        }

        .three {
            background-color: blueviolet;
            width: 200px;
            height: 200px;
            top: 100px;
            left: 100px;
            z-index: 150;
        }

        .four {
            background-color: rgb(148, 206, 165);
            width: 200px;
            height: 200px;
            top: 250px;
            left: 350px;
            z-index: 50;
        }
    </style>
</head>

<body>
    <div class="one">
        1
        <div class="two">2</div>
        <div class="three">3</div>
    </div>
    <div class="four">4</div>
</body>

</html>

two和three是one的子元素，它们的层叠在one中被处理，一旦one中的层叠和渲染完成，one会当成一个整体传递与相邻兄弟元素在root进行层叠。
two和three在one中，它们的z-index与one层叠上下文有关。
实际上的z-index one=10；two=10.100；three=10.150；four=50

属性影响层叠栗子

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .backgroundorborder {
            background-color: rgb(233, 109, 167);
            border: 2px solid rgba(122, 166, 247, 0.9);
            width: 500px;
            height: 500px;
            text-align: right;
        }

        .negativeZIndex {
            background-color: aquamarine;
            position: relative;
            z-index: -1;
            width: 800px;
            height: 800px;
            text-align: right;
        }

        .blockbox {
            background-color: rgb(185, 143, 224);
            display: block;
            width: 500px;
            height: 500px;
            text-align: right;
        }

        .floatbox {
            background-color: rgb(183, 240, 166);
            display: inline-block;
            width: 400px;
            height: 400px;
            text-align: right;
        }

        .inlinebox {
            background-color: rgb(241, 156, 126);
            display: inline-block;
            width: 300px;
            height: 300px;
            text-align: right;
        }

        .boxZIndex0 {
            background-color: aqua;
            position: absolute;
            width: 200px;
            height: 200px;
            top: 0;
            left: 0;
            z-index: 0;
            text-align: right;
        }

        .PositiveZIndex {
            background-color: crimson;
            position: absolute;
            width: 100px;
            height: 100px;
            top: 0;
            left: 0;
            z-index: 1;
            text-align: right;
        }
    </style>
</head>

<body>
    <div class="backgroundorborder">
        background border color 等级1
        <div class="negativeZIndex">
            普通盒子模型 z-index -1 等级2
        </div>

        <div class="blockbox">
            普通盒子模型 块盒子 等级3
        </div>

        <div class="floatbox">
            浮动盒子模型 等级4
        </div>

        <div class="inlinebox">
            内联盒子模型 等级5
        </div>

        <div class="boxZIndex0">
            普通盒子模型 z-index 0 等级6
        </div>

        <div class="PositiveZIndex">
            普通盒子模型 z-index 1 等级7
        </div>
    </div>
</body>


</html>