position的四个属性

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