CSS定位的使用

1.相对定位 相对于元素自身的偏移

position: relative;
        top: 20px;
        left: -50px;

relative声明了之后，在下方声明四个方向的位置偏移量

这里注意方向 相对于原来的top有了20px的距离，相对于原来的left有了-50px的距离，因此元素是向下和向左移动

虽然元素会出现偏移出父级元素的情况，但这并不是浮动，父级元素仍然保留有其原来的位置

2.绝对定位

position: absolute;

与父级元素完全无关，相对于浏览器进行定位

当父级元素拥有相对定位时，绝对定位会相对于父级元素进行定位 

3.固定定位

position: fixed;

相对于浏览器位置不会改变，页面改动，元素位置也不会改变

4.z-index

首先要有图层的概念

 

 

这里举例：页面实现如下效果

 

最底下是img 然后一个背景为黑色的空div，然后是一个text，此时的显示界面如图，但当在空的黑色div使用了

.block{
    background: black;
    position: relative;
   top: -100px;
z-index: 3;
}

后页面：

 

 此时空div的图层优先级比text高所以优先展示，z-index从0开始越大优先级越高，反之亦是如此；

.block{
    background: black;
    position: relative;
   top: -100px;
z-index: 3;
}
.text{

    color: white;
    position: relative;
    top: -150px;
    z-index: 4;
}