CSS样式--定位

定位属性（position）允许元素相对于其自身所在的位置、父级元素移动、浏览器窗口（取决于属性值）进行移动。
优点：
1.这样的方式具有很好的灵活性，所以多用于元素需要移动到一些比较偏僻的位置
2.定位元素会脱离普通文档流，所以通常用于一个盒子与其他元素重叠的时候，不对其他元素造成影响

1 定位的属性与值

定位的属性，通过不同的值，赋予元素不同定位的特性。

1.1 relative 相对定位

属性值：relative
功能：规定元素可以相对其自身的位置移动
特性：
1.元素自身的特性不会有任何改变
2.使用偏移量后会相对原来的位置移动
3.不脱离相对文档流，下方元素不会向上移动。

1.2 absolute 绝对定位

属性值：absolute
功能：规定元素可以相对定位父级移动
特性：
1.元素脱离普通文档流，下方元素会上移。
2.使用偏移量后会相对定位父级移动
定位父级：参考距离最近的第一个拥有拥有定位属性（除了static，一般用relative）的父级元素
3. 没有定位父级的时候相对于body移动

1.3 fixed 固定定位

值：fixed
功能：规定元素可以相对浏览器窗口移动
特性：
1.元素脱离普通文档流
2. 固定定位就是固定在页面的某个位置

1.4 static 默认值

值：static
功能：元素将失去定位特性
特性：定位的默认值

2 定位的偏移量属性

2.1定位偏移量的作用

元素添加定位属性与属性值后，元素定位没有偏移量时，只会出现在默认的位置（即原来的位置元素不发生移动）。假如元素使用绝对定位没有设置偏移量时，虽然位置没有发生移动，但此时该元素的特性效果仍然还在，如脱离文档流，下方的元素向上移动。假如元素使用相对定位，不会脱离文档流。如果想要移动定位元素的位置，还需要添加与定位配合使用的偏移量属性来使元素移动。
2.2偏移量属性
属性：
left：元素左边与参照物(移动前)左边的距离
right：元素右边与参照物右边的距离
top：元素上边与参照物上边的距离
bottom：元素下边与参照物下边的距离
功能：移动添加了定位的属性的元素
值：
固定数值
百分比
注意点：一般同轴向（X、Y）的偏移量属性通常只会出现一个

3 定位的层级

定位元素与定位元素之间有时候会遇到相互层叠的情况，通过层级我们可以决定他们之间层叠的顺序。

3.1 层级规则

默认层级：
默认情况下html结构中，顺序越后元素的层级越高。
层级属性：
通过层级属性的设置值越大层级越高

3.2 z-index层级

属性：
z-index
功能：
设置元素的层级
属性值：
不带单位的数值
注意点：
（1）嵌套元素层级比较时，默认情况下，子级比父级层级高。增大父级z-index值，子级也会随之增大。因此要想使父级层级大于子级，就要对子级z-index值减小为负值（一般改子级元素，使父级元素显示在自己元素上方）。
（2）只有使用了定位的元素层级属性才有意义，必须是给了定位属性的元素，才可以去改动层级关系，因此要想比较或改动两者层级大小，就要先对其使用定位。
（3）粗略地可以认为，定位层级大于浮动。因为定位会覆盖文字，浮动会挤走文字。

正常情况下，子级（黄色）在父级（粉红色）之上。提高层级，一般改动子级元素。
（1）若改变父级z-index,无论是正值还是负值，子级元素都在父级元素上方。
（2）若改动子级，给予子级元素负值，则就降低了子级元素的层级，效果就会出现父级在子级上方显示。

4 定位元素居中

absolute会使margin:auto居中效果失效，因此通过定位偏移量来控制。
两种方法：

方法一：
通过改变子级某个方向为0的数量可以实现
1.四个方向均为0以及margin:auto;，上下左右居中。
2.left:0;right:0;顶部居中 top:0;bottom:0;左边居中
3.left:0;top:0;左上角 left:0;bottom:0;左下角
4.right:0;top:0;右上角 right:0;bottom:0;右下角
方法二：

（1）先将元素看做一个点设置居中。
left:50%;
top:50%;

（2）由于盒子自身的宽度和大小，因此需要向相反的方向拉伸一定的长度。注意设置为负值。
margin-left:-50px;
margin-top:-40px;