版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
1.static(静态定位）：
- position属性的默认值，没有定位
- 元素出现在正常流中（忽略top、bottom、left、right或者z-index声明）
2.relative（相对定位）：
- 生成相对定位的元素，相对于父级左上角为原点进行定位
- 父级的padding属性会对其有影响
- top值为相对于它自身原来的位置向下移动
- bottom为相对于他原来的位置向上移动
- top和bottom同时存在时，只有top起作用
- left为相对于它自身原来的位置向右移动
- right为相对于它自身原来的位置向左移动
- 脱离正常的文本流，但是该元素在文本流中所占的空间依然存在
3.flxed(固定定位）：
- 生成绝对定位的元素
- 相对于浏览器窗口进行定位
- 原来的元素空间被删除，新生成一个块级框
- 固定在页面的一个位置，即使向下滑动页面，该块级框依旧位置不改变
4.absolute(绝对定位）:
- 生成绝对定位的元素
- 相对于static定位以外的第一个父元素进行定位。
- 原来的元素空间被删除，新生成一个块级框，脱离正常文本流
- 元素的位置通过left、top、bottom、right属性进行设定
- 可通过z-index进行层次分级
- 在position属性值为absolute的同时，如果一级父对象（无论是父对象还是祖父对象，或者再高辈分，一样）的position属性值为relative时，absolute相对于浏览器窗口的定位将会变成相对父对象定位
5.sticky：
- 是css定位新增属性
- 可以说是相对定位relative和固定定位fixed的结合
- 它主要用在对scroll事件的监听上
- 简单来说，在滑动过程中，某个元素距离其父元素的距离达到sticky粘性定位的要求时(比如top：100px)；position:sticky这时的效果相当于fixed定位，固定到适当位置。
总结 ：
- relative定位的层总是相对于其最近的父元素，无论其父元素是何种定位方式
- absolute定位的层总是相对于其最近定义为absolute或relative的父层
- 属性为relative的元素可以用来布局页面，属性为absolute的元素用来定位某元素在父级中的位置
- 绝对定位（absolute）定位对象在可视区域之外会导致滚动条出现。而放置相对（relative）定位对象在可视区域之外，滚动条不会出现
备注
文档流：将窗体自上而下分成一行行，并在每行中按从左到右的顺序排放元素，即为文档流，绝对定位、相对定位、浮动会使元素脱离文档流
父子关系是无法使用z-index来设定上下关系的，一定是子级在上父级在下，使用static定位或无position定位的元素z-index属性是无效的
sticky元素效果完全受制于父级元素们。
参考自 https://www.cnblogs.com/theWayToAce/p/5264436.html