1. 什么是posotion属性

官方解释为：position属性用于指定一个元素在文档中的定位方式。top，right,bottom和left属性则决定了该元素的最终位置。
简单来讲，这个属性可以给任何元素一个定位的方式，通过给定top,right,bottom,left这四个属性，使元素产生移动。任何元素都可以定位，不过绝对或固定定位会生成一个块级框，也就是不脱离文档流。

2. 为什么需要position属性

在我们实现一些页面效果时，如：
某个元素可以自由在盒子内移动位置，并且压住其他盒子
当滚动窗口时，盒子固定在页面的最上角或其他地方
这两种效果无法通过浮动来快速实现，但可以通过position来快速实现
浮动与定位的效果区别：
浮动可以让多个块级盒子在一行没有缝隙的显示，常用于横向排列盒子 定位可以让盒子自由的在某个盒子内移动位置或是固定在屏幕的某一区域，并且可以压住其他盒子

3. 定位的类型及偏移属性

定位的常用类型有五种，static,relative,absolute,fiexd和sticky，不同的类型有不同的使用方式。

值	描述
static	默认值，忽略top，bottom，left，right和index-z的声明，未脱流
relative	相对定位，给元素设置相对于自己原本位置的定位，元素原本的位置会被保留，未脱流
absolute	绝对定位，指元素相对于static定位之外的第一个父元素进行定位，脱离标准流
fiexd	固定定位，使元素的定位固定在当前屏幕可视区域的某一位置，脱离标准流
sticky	粘性定位，可以看成固定定位与相对定位的混合，未脱流

3.1 偏移属性

偏移属性	示例	描述
top	top:10px	顶部偏移量，定义距离父元素上边线的距离为10px
bottom	bottom:10px	底部偏移量，定义距离父元素下边线的距离为10px
left	left:10px	左边偏移量，定义距离父元素左边线的距离为10px
right	right:10px	右边偏移量，定义距离父元素右边的距离为10px

这些属性指的是距离容纳块最近的边的偏移量

3.2 static（默认值）

static代表的是默认值，该关键字指定元素使用正常的布局行为，即元素在文档常规流中当前的布局位置。当position的值为static时，忽略top，bottom，left，right和index-z的声明

效果代码

    <div class="box1">
        <div class="box2">这是内层的盒子</div>
    </div>

    .box1 {
        width: 300px;
        height: 300px;
        background-color: blue;
    }
    .box2 {
        width: 100px;
        height: 100px;
        position: static;
        left: 10px;
        top: 10px;
        background-color: brown;
    }

效果图

可以看出，当盒子的position属性为static时，left,right,top,bottom,index-z属性都失效

3.3 relative 相对定位

relative，相对定位。指的是给元素设定相对于自己原本位置的定位，元素并不脱离文档流，因此元素原来的位置会被保留，其他元素的位置不会受到影响。
特点：
相对于自己原来的位置来移动
不脱流，原来在标准流的位置继续占有，后面的盒子仍然是以标准流的形式来对待它
效果代码：

    <div class="box1">
        <div class="box2">这是内部盒子</div>
    </div>

    .box1 {
        width: 300px;
        height: 300px;
        background-color: blue;
    }
    .box2 {
        width: 100px;
        height: 100px;
        background-color: brown;
        position: relative;
        top: 30px;
        left: 30px;
    }

3.4 absolute 绝对定位

absolut，绝对定位。通过指定元素相对于最近的非static元素定位祖先元素的偏移，来确定元素的位置。决定定位的元素可以设置外边距，且不与其他边距合并。元素会被移出文档流
特点：
如果没有祖先元素或者祖先元素没有定位，则以浏览器（body）为准定位（Document文档）
如果祖先元素有定位（相对，绝对，固定定位）时，则以最近一级有定位的祖先元素为参考点进行位置的移动
效果代码

    <div class="box1">
        <div class="box2">这是一个盒子</div>
    </div>

 .box1 {
     width: 300px;
     height: 300px;
     margin-top: 30px;
     background-color: red;
 }
 .box2 {
     width: 100px;
     height: 100px;
     background-color: azure;
     position: absolute;
     top: 30px;
     left: 30px;
 }

当父元素无定位时，相对于上一级有定位的元素为准进行定位，如果都没有则找浏览器进行定位

当父元素有定位时，相对于父元素进行定位

比较经常使用absolute的情况：子绝父相
子绝父相的意思是：如果子元素是绝对定位，那么父元素要使用相对定位。
原因如下：
1.子级绝对定位，绝对定位的盒子不占有位置，可以放到父级盒子中的任意地方不影响其他兄弟盒子
2.因为子级是绝对定位，那么父级就要添加定位来约束盒子，使子级元素在父级元素中展示
3.父盒子布局时又要占有位置，父盒子既要约束子盒子，又要占有位置，符合相对定位的特点，适合使用相对定位

3.5 fiexd 固定定位

fiexd，固定定位。通过指定元素相对于屏幕视口的位置来指定元素位置。元素的位置在屏幕滚动时不会改变。元素会被移出文档流
特点：
1.以浏览器的可视窗口为参照点来移动元素，跟父元素没有任何关系，不会随滚动条的滚动而滚动
2.固定定位不会再占有原来的位置
效果代码

    <div class="box1">
        <div class="box2">这是一个盒子</div>
    </div>

    body {
        height: 1000px;
    }
    .box1 {
        width: 300px;
        height: 300px;
        background-color: red;
    }
    .box2 {
        width: 100px;
        height: 100px;
        background-color: black;
        position: fixed;
        left: 400px;
    }

3.6 sticky 粘性定位

sticky,粘性定位。粘性定位可以看做相对定位和固定定位的混合
特点：
1以浏览器的可视窗口为参照点来移动元素（固定定位的特点）
2粘性定位占有原来的位置（相对定位的特点）
3必须添加边偏移（top,bottom,left,right）才会起效，如果不添加则会被当成相对定位的盒子
效果代码：

    <nav>我是导航栏</nav>
    <div class="box">我是一个盒子</div>

    body {
        height: 1000px;
    }
    nav {
        height: 300px;
        background-color: red;
        position: sticky;
        left: 10px;
    }
    .box {
        width: 100px;
        height: 100px;
        background-color: brown;
    }