POSITION定位有哪几种？各有什么特点？{css定位使用过程的记录总结详解}

POSITION定位有哪几种？各有什么特点？

1.背景介绍

position是CSS中非常重要并且常用的一个属性，通过position属性，我们可以让元素相对于其正常位置，父元素或者浏览器窗口进行偏移。

2.知识剖析

position介绍
position属性用于指定一个元素在文档中的定位方式。top，right，bottom 和 left ，还有 z-index 属性则决定了该元素的最终位置。
position的定位方式共有四个常用的：static、relative、absolute、fixed。还有不常用的：inherit、initial、unset、sticky

top/right/bottom/left

z-index
Z轴上的排序
z-index

从图中可以看出z-index数值越大就越在上面。
那是不是z-index值越大，元素就一定在最上面呢？
答案是否定的，这里就涉及到z-index栈
z-index栈

从右边的图可以看出当给它们的父类容器设置z-index值时，它们子类的层级发生了改变。
由此得出结论：父类容器的 z-index 优于子类 z-index

static

所有元素在默认的情况下position属性均为static。
其用法为：在改变了元素的position属性后可以将元素重置为static让其回归到页面默认的文档流中。
需要注意的是z-index属性在position为static的情况下无效。

relative

俗称的相对定位，重点在于对相对的理解。我们都知道每个元素在页面的文档流中会“占用”一个位置，这个位置可以理解为默认位置，而相对定位就是将元素偏离元素的默认位置，但文档流中依然保持着原有的默认位置，并没有脱离文档流，只是视觉上发生的偏移。

relative的特点
仍在文档流之中，并按照文档流中的顺序进行排列。
参照物为元素本身的位置。
设置relative最常用的目的为改变元素层级和设置为绝对定位的参照物。

absolute

俗称的绝对定位，绝对定位是相对而言的，怎么理解呢？应用了position: absolute的元素会通过相对于最近的非 static 定位的祖先元素的偏移，来确定元素位置。如果其祖先元素都没有设置过非 static 定位的属性时，则该元素最终将以 html 元素进行位置偏移。

absolute的特点

• 默认宽度为内容宽度
• 脱离文档流
• 参照物为第一个定位祖先或根元素（ 元素）

fixed

俗称的固定定位。该定位方式常用于创建在滚动屏幕时仍固定在相同位置的元素。fixed和absolute有很多共同点：
1.会改变行内元素的呈现模式，使display值变更为block。
2.会让元素脱离普通流，不占据空间。
3.默认会覆盖到非定位元素上。
fixed与absolute最大的区别在于：absolute的参照物是可以被设置的，而fixed的参照物固定为浏览器窗口。即当你滚动网页，其元素与浏览器窗口之间的距离是恒定不变的。

fixed的特点:

• 默认宽度为内容宽度
• 脱离文档流
• 参照物为视窗

参考:https://www.jianshu.com/p/671d64424359