绝对定位

position:

absolute

特性：

1、脱离文档流，定位元素占据的位置会释放

2、原点计算：如果该元素做了定位，那么就去找它做了定位的父元素（找最近的）作为原点基准，如果父元素都没做定位，则以浏览器(0,0)作为原点基准。

3、对内嵌元素定位后，设置宽高属性就会有效果

应用场景：

一般情况下，绝对定位用在下拉菜单、焦点图轮播、弹出数字气泡、特别花边等场景

相对定位

position:

relative

1、不脱离文档流，定位元素占据的位置不会被释放/

2、原点计算：以父级元素作为原点基准，若没有父级元素则以浏览器(0,0)为基准。

一般的应用：父相子绝

3、父元素为相对定位，子元素为绝对定位，文档元素不会受影响。

4、父元素提供相对定位后，子元素以父元素为基准来进行定位。

应用场景：

相对定位一般情况下很少自己单独使用，都是配合绝对定位使用，为绝对定位创造定位父级而又不设置偏移量

固定定位

position:

fixed

1、脱离了文档流

2、原点计算：以浏览器(0,0)作为原点基准，尽管父元素做了定位也不会影响它的原点

基准。

应用场景：

一般在网页中被用在窗口左右两边的固定广告、返回顶部图标、吸顶导航栏等

注意：使用定位后会激活如下5个属性

left | right | top | bottom | z-index

z-index

改变定位后的叠放顺序

取值范围：-1~9999

其他：

设置网页元素的透明度

opacity: 0~1;

filter: opacity(0.2) | contrast(0.2)

绝对定位（absolute）代码案例：

我是span

相对定位（relative）代码案例：

固定定位（fixed）代码案例：