定位

css的定位常用属性共有三种：

相对定位 relative
绝对定位 absolute
固定定位 fixed

• 1.脱标
  2.位移的参考系
  固定定位：脱标，参考系为浏览器
  相对定位：不脱标，参考系为自身
  绝对定位：脱标，参考系为拥有定位属性的父元素

如何设置一个元素的定位属性
通过position 属性来设置元素的定位方式，top，bottom，left，right。属性决定了元素的最终位置。
left：距离左边的距离
right：距离右边的距离
top：距离顶部的距离
bottom：距离底部的距离

绝对一个元素的位置最起码需要两个位置属性，横坐标和纵坐标各一个。

固定定位

固定定位：相对于浏览器窗口进行定位，无论页面如何滚动，元素的位置都不会发生变化.

使用场景：
1.返回顶部
2.联系客服
3.顶部导航条
使用方法

相对定位

相对定位：让元素相对于自己原来的位置，进行位置调整。（主要用于小范围的位置调整）

>position:relative;
left:50px
top:50px

【注意点】

1. 如果只设置了position：relative，没有设置left/right等它们的值，元素还是在原来的位置上。没有任何效果。
2. left和top的优先级比right和bottom的优先级更高。
3. 相对定位不脱标，会保留原来的位置。

margin和相对定位移动元素的区别

1.影响

相对定位只会影响当前元素本身的位置，而相邻的元素不会受到影响。

margin不仅会影响当前元素本身的位置，而且相邻元素也会受到影响。

2.概念

margin：表示盒子与盒子之间的距离。

相对定位：位置调整。

用途

1. 微调元素的位置（很少用）
2. 配合绝对定位，做绝对定位的参考系，（子绝父相）

绝对定位

position：absolute;
left：0px;
top：0px;

【注意点】

1. 默认情况下，绝对定位的元素的参考点为body。
2. 如果父元素有定位属性，不管是相对定位还是绝对定位，参考系都为父容器，如果父容器没有，则继续往上找，直到找到body标签。
3. 绝对定位会脱标。

应用

1. 压盖效果。
2. 让盒子居中。(水平垂直都可以居中，margin只能水平居中)

居中公式：

left：50%；
margin-left：-自身宽度的一半

压盖顺序

z-index属性

决定了定位元素的压盖顺序，属性值为数字，必须是一个正整数。数字大的会在上面。建议取值范围：0-99/999

1. 默认情况下，定位元素会应该在没有定位属性的元素上。
2. 如果是两个定位元素互相压盖，默认情况下，看书写的顺序，写在后面的会压盖住写在前面的。
3. 定位元素默认z-index为0
4. 只能用于定位元素。不管是相对定位，绝对定位，固定定位都可以，但是别的元素，比如浮动的元素不可用。
5. 从父现象。两个定位的子元素的压盖顺序要看相对的父元素的顺序。父元素顺序高的，子元素的顺序也高，父元素顺序低的，子元素的z-index再高也没用。