一看就懂，关于HTML5里面的定位 （position ）相对定位，绝对定位，固定定位 ，粘性定位；有图有对比 值得你的信赖（一个在千锋逆战班奋斗的年轻人）

*HTML5 定位##

1. position:static(默认值)没有定位
2. position:relative(相对定位)
3. position:absolute(绝对定位)
4. Position:fixed(固定定位)
5. position:sticky(粘性定位)（css3新增兼容不好）

作用

A.在正常情况下.可以让一个元素覆盖在另一个元素上面
B.可可以移动一个元素的位置
C.可以固定某个容器在浏览器窗口某个位置不变
D.可以做吸顶效果

.position:relative(相对定位)

应用场景

a.为了微调一些元素的位置
b.是做于绝对定位的参考对象（父相子绝）
父相字绝：子元素绝对定位，父元素相对定位。让子元素以父元素的标准来定位
这种方法是我们在页面布局中常用的布局方案。因为父元素设置相对定位，不脱离文档，子元素设置绝对定位，仅仅是在当前父元素内调整位置，不会对父元素以外的元素产生影响.

1. 特性

不脱离文档流，相对定位后，该元素占浏览器位置

2.移动位置及参照物

相对于自己本身的位置（初始位置）移动，原来的空间还在，参照物是自己

3.层叠顺序

多个元素给完相对定位之后，不移动位置不会覆盖，如果移动了位置后面的元素会覆盖前面的元素

.posittion:absolut(绝对定位)

应用场景

绝对定位position用于定位盒子对象，有时一个布局中几个小对象，不易用css padding、进行相对定位，这个时候我们就可以使用绝对定位来轻松搞定。特别是一个盒子里几个小盒子不规律的布局，这个时候我们使用position绝对定位非常方便布局对象。类似下面图示的 布局
搭配相对定位使用（父相子绝）

1. 特性：

脱离文档流，当一个元素绝对定位之后，该元素是悬空的，下面的元素如果没有定位会上去

注意(float:””;)也是脱离文档流，但是浮动之后下面的容器文字会环绕显示。

2. 层叠顺序：

如果多个元素同时给了绝对定位，那么排在后面的元素会在最上面，可以通过 z-index：0（默认值是0），可以给负值，值越大层越靠上。

3. 移动位置时候的参照物：

定位之后可以使用 top right bottom left 移动位置
参照物1 浏览器的第一屏幕

参照物2 是父元素，前提条件是父元素有定位的情况下

.posittion:fixed(固定定位)

应用场景

类似下图中的场景：将一些链接图标固定在浏览器窗口的一侧，便于用户体验等

1.特性：

脱离文档流，但该元素会固定在某个位置不动，多个元素 固定定位元素会盖在最上面

2.层叠顺序

.盖在最上面，也可以用z-index（添加给定位元素）改变层叠顺序

3.参照物

3.用top left right bottom 移动 位置，固定位置后元素以窗口为参照物固定其位置不变
4.参照物是浏览器窗口，和它元素无关（包括添加了定位的元素），拖动窗口不在改变

.posittion:sticky(粘性定位)

应用场景：

各个网站的粘性菜单比如百度新闻的导航栏

1. 粘性定位被视为对固定定位和相对定位的混和体，该元素被视为相对定位直到它超过一定范围后，此时它被称为固定定位
A.必须指定 top、right、bottom、left 四个阈值的其中之一， 粘性定位才会生效。
B.此外，粘性定位元素的表现与其父元素有关当父元素不是 body 时，父元素的高度（或宽度）必须大于粘性定位元素的高度，才能在页面滚动时，看出粘住效果。

谢谢观看，如有失误之处，还多多海涵，请于本人联系修正，谢谢.