【前端面试小册】position和z-index7年前端的【前端面试小册】免费分享；拿过offer有：美团、滴滴、快手、

1、position和z-index

注意：position非static设置z-index才会生效

2、position取值

position: relative; // 相对定位
position: static; // 静态定位
position: absolute; // 绝对定位
position: sticky; // 粘性定位
position: fixed; // 固定定位

2.1、static

1、静态定位，position默认值，遵循标准文档流
2、设置left top无效

2.2、relative

1、相对定位，遵循标准文档流
2、可设置left top等属性,并不改变其所占空间
3、可设置z-index

demo-20

<div class="block">
    <div class="box1">box1</div>
    <div class="box2">box2</div>
</div>
<div class="block">
    <div class="box3">box3</div>
    <div class="box4">box4</div>
</div>
.box1{
    width: 100px;
    height: 100px;
    position: relative;
    left: 50px;
    top: 50px;
    background-color: black;
    color:white
}
.box2{
    width: 100px;
    height: 100px;
    background-color: red;
    color:white;
    position: fixed;
}
.box3{
    width: 100px;
    height: 100px;
    position: relative;
    left: 50px;
    top: 50px;
    background-color: black;
    color:white;
    z-index: 10
}
.box4{
    width: 100px;
    height: 100px;
    background-color: red;
    color:white;
    position: fixed;
}

效果图

box1和box3都设置了realtive和left top，位置偏移
红色box2和box4，位置没有上移，说明设置relative的元素还占据空间
box3设置了z-index:10，所以黑色压住了红色；

2.3、absolute

1、绝对定位，脱离文档标准流，不影响常规流的布局
2、相对于最近的一个relative、fixed或absolute的父元素，如果没有则相对于body
3、在设置了position：absolute，但是没设置left、top、right、bottom之一，等价于position：relative
4、设置了height，又设置了top/bottom，top生效；同理设置了width时，left和right存在，left生效
5、相对于border进行定位

demo

<div class="wrap wrap1">
    <div class="father1">
        <div class="child1"></div>
    </div>
</div>
<div class="wrap wrap2">
    <div class="father2">
        <div class="child2"></div>
    </div>
</div>
<div class="wrap wrap3">
    <div class="father3">
        <div class="child3"></div>
    </div>
</div>
 .wrap1{
    width: 200px;
    height: 200px;
    border:1px solid red;
    padding: 10px;
    margin-bottom: 10px;
}
.father1{
    width: 150px;
    height: 150px;
    border:1px solid green;
    padding: 10px;
}
.child1{
    width: 100px;
    height: 100px;
    background-color: blue;
    color:white;
    position: absolute;
    left: 0;
}
.wrap2{
    width: 200px;
    height: 200px;
    border:1px solid red;
    padding: 10px;
    position: relative;
}
.father2{
    width: 150px;
    height: 150px;
    border:1px solid green;
    padding: 10px;
}
.child2{
    width: 100px;
    height: 100px;
    background-color: blue;
    color:white;
    position: absolute;
    left: 0;
}
.wrap3{
    width: 200px;
    height: 200px;
    border:1px solid red;
    padding: 10px;
}
.father3{
    width: 150px;
    height: 150px;
    border:1px solid green;
    padding: 10px;
    position: relative;
}
.child3{
    width: 100px;
    height: 100px;
    background-color: blue;
    color:white;
    position: absolute;
    left: 0;
}

分析：

蓝色：子元素box1 box2 box3；绿框：父元素father1 father2 fahter3；红框：容器wrap1 wrap2 wrap3；

box1相对于body定位，是因为box1上面没有元素设置position非static
box2相对于红框容器元素定位，是因为容器元素设置了position：relative
box3相对于绿框父元素定位，是因为父元素设置了position：relative

2.4、fixed

1、固定定位，脱离标准文档流
2、相对于浏览器窗口定位
3、可设置z-index改变层叠权重

2.5、sticky

使用条件:

父元素属性不能：overflow:hidden或overflow:auto
须指定top、bottom、left、right值之一，否则只会处于相对定位
【父元素高度】 >= 【sticky元素高度】
sticky元素仅在其父元素内生效

// sticky:粘性定位
1

3、z-index

z-index在定位元素（非static）才有效果,一般浏览器position不为static，且不设置z-index时，z-index为auto，IE6/7下z-index为0

3.1、层叠等级

在同一个层叠上下文，层叠等级越高的会遮住层叠等级越低的

3.2、等级顺序

1、【 z -index > 0】定位元素，设置z -index值
2、【z- index :0 】定位元素
3、【行内盒】
4、【浮动盒子】
5、块级盒子
6、 z-index < 0
背景和边框

注意！！！！

不在统一层叠上下文的不能按照等级顺序来比较，比如下面例子：

// demo23
 <div class="box">
    【box】z-index:100
   <div class="box1">
    【box1】z-index:300
   </div>
   <div class="box2">
    【box2】z-index:400
   </div>
</div>
<div class="box3">
    【box3】z-index:200
</div>
 <style>
   div{
       width: 200px;
       height: 200px;
        position: absolute;
        color: white;
   }
   .box{
        z-index: 100;
        background-color: green;
   }
   .box1{
       left: 50px;
       top: 50px;
       z-index: 300;
       background-color: red;
   }
   .box2{
        left: 100px;
       top: 100px;
       z-index: 400;
       background-color: blue;
   }
   .box3{
        left: 150px;
       top: 150px;
       z-index: 200;
       background-color: purple;
   }
</style>

问题

z-index：200的box3遮住了z-index:400的box2，不符合层叠顺序

原因

1、box和box3属于不同层叠上下文
2、box1、box2是box的层叠上下文元素
3、box的z-index为100，所以可以理解box1的z-index为100.300
4、box3的z-index=200 > box1的z-index=100.300

引用网上一张图说明z-index