定位属性：position 的使用方法

定位:（position）

为什么使用定位
    将盒子定在浏览器的某个位置 自由的漂浮在其他盒子（包括标准流和浮动）的上面
    三种机制的上下顺序：
    底层标准流（海底）  ---    中间层浮动（海面）   ---  最上层定位（天空）

组成 ： 定位 = 定位模式 + 边偏移   简单说，我们定位的盒子是通过边偏移来移动位

边偏移属性	实例	描述
top	top : 80px	顶部偏移量，定义元素相当于其父元素上边线的距离
left	left : 80px	左侧偏移量，定义元素相当于其父元素左边线的距离
right	right : 80px	右侧偏移量，定义元素相当于其父元素右边线的距离
bottom	bottom : 80px	底部偏移量，定义元素相当于其父元素下边线的距离

定位的盒子有了边偏移才可以完成定位才有价值，一般情况下，只有在有定位的地方必有边偏移

1，静态定位（static）

静态定位position的默认属性 它只是意味着将元素放在他标准流布局中的正常位置

2，相对定位（relative）

相对定位 就是相对于自己原来在标准流的位置来进行移动

3，绝对定位（absolute）

绝对定位 相对于最近的非static定位父级元素来偏移

4,固定定位（fixed）

设置固定定位后 元素定在设置的位置上，元素不会随着滚动条滚动

子绝父相

就是绝对定位的上级如果有相对定位的话 就会根据相对定位为左顶点进行偏移

堆叠顺序（z-index） 数值：负无穷到正无穷 默认值0 数值越大越在上层 注意： z-index 只能应用于定位的元素

定位的水平垂直居中方法

div {
            width: 200px;
            height: 200px;
            background-color: blue;
            position: absolute;
            left: calc(50% - 100px);
            top: calc(50% - 100px);
        }

 div {
            width: 200px;
            height: 200px;
            background-color: blue;
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            right: 0;
            margin: auto;
        }

注意：绝对定位和固定定位的盒子不能通过设置margin：0 auto设置水平居中