定位、图片Z-index覆盖详解

CSS最重要的三个技术:浮动、盒模型、定位，这里主要介绍一下定位方面的知识：
我们都知道定位通常可以分为三种:固定定位、绝对定位、相对定位。

 **相对定位:**
    position:relative;
    left:
    right:
    top:
    bottom:
    正值的话分别表示向右、向左、向下、向上移动;
    负值的话分别表示向左、向右、向上、向下移动;
    相对定位表示元素相对自己当前的位置移动，一般左右任选一个，上下任选一个，进行定位。

****参见代码:****

div{
        width: 200px;
        height: 200px;
    }
    .box1{
        background-color: #f00;
    }
    .box2{
        background-color: #0f0;
    }
    <div class="box1"></div>
    <div class="box2"></div>
        ```

若是加上:

        position: relative;
        top: 200px;
        left:200px; 
    可以发现div分别向左移动了200px,分别向下移动了200px，但是原始位置还保留ing

定位前的页面效果如下

定位后的页面效果如下

绝对定位
position:absolute;
top:
bottom:
left:
right:
也是四个属性选择其二，正值、负值表示同相对定位
但值得注意的一点是，一旦给元素设置绝对定位的话，在父级没有设置定位属性的话，默认以body的位置定位，比如

position:absolute;
top:0px;
left:0px;

这个表示的是以页面的左上角开始定位
还有一点：

position:absolute;
bottom:0;
left:0;

这个则表示的是以当前浏览器显示的页面的左下角为基准点，定位。
通常我们会通过“子绝父相”来进行一些效果的编写，或者是微调，这是非常有用的O(∩_∩)O~~

固定定位
position:fixed;
left:
right:
top:
bottom:
正负值等效果参见以上，其定位是针对浏览器即可视区来定位的，就例如一些网站固定的菜单栏等：

只需要设置：

position:fixed;
top:0;
left:0;

便可以得到京东固定导航栏的效果

z-index
z-index主要是用于覆盖及层叠，z-index的值为数字，数字大的覆盖叠加在数字小的上面，但是要配合定位一起使用。
默认的压盖顺序:
1)定位元素压盖无定位元素。
2)如果都定位了，那么html写在后面压盖前面的z-index没有单位的，在都定位了的元素中，数字大的压盖数字小的，只有定位了的元素才能使用z-index。
3)在父级元素与子代元素都有z-index的情况下，我们可以先比较父级元素的z-index,父级的z-index大的子元素将覆盖父级z-index小的子元素;在两个父级的z-index相等的情况下，无论他们的子代元素的z-index有多大，都遵循后来的元素覆盖前面的元素的情况。