元素的位置属性 Position 有5个可能取值：
static | relative | absolute | fixed | sticky
static
static 是静态定位，是 position 的默认值，也是 CSS 默认的布局方式。
从上到下，从左到右排列元素，属于正常的文档流。因此 left, right, top, bottom 属性都会失效。
relative
relative 是相对定位。元素先放在 static 定位下的位置，然后通过 left、top 等属性设置位置的偏移。但是元素所占的空间还保留在原位。其他元素不会挤占它原本的空间。
absolute
absolute 是绝对定位。会把元素移出正常的文档流，并不为元素预留空间。后边的元素会挤占它的空间，而它自己则会覆盖在挤占它空间的元素的上方。
它也可以通过设置 left、top 等属性来设置位置偏移。但是与 relative 不同的是，这些属性是相对于包含它的元素来偏移的。
那么什么是包含它的元素呢？
如果这个元素的所有父级元素都没有设置 position、transform、perspective 属性，那么包含元素就是“包含html元素的容器”，即浏览器窗口。
如果父级元素中有设置 position（除了static）、transform、perspective 属性的，那么包含元素就是离它最近的设置了这些属性的父级元素。它就会相对于父级元素的 padding 盒子边界进行偏移。
我们通常使用relative定位来设置包含元素。因为它不会影响正常的文档流。
absolute 是用途最广的定位方式，可以实现弹出层、叠加、不规则的位置等布局形式。
fixed
fixed 是固定定位，跟 absolute 定位类似，只是它的包含元素是当前浏览器窗口。当设置好 left、top 等属性后，无论页面怎么滚动，它都会固定在同一个位置。适合用于固定浮窗，导航条的布局。
absolute、fixed 这种脱离文档流的布局方式，会把元素宽高设置为内容宽高。可以通过设置 left: 0; right: 0 来让宽度占满包含容器，或 top: 0; bottom: 0 来让高度占满包含容器。
sticky
sticky 是一个比较新的属性，相当于 relative 和 fixed 的结合体。它可以让元素在距离浏览器窗口一定位置时，把它变成固定在这个位置。而其他情况下，就还在正常的文档流中。通过 left、top、right、bottom 设置在距离浏览器左、上、右、下多少距离时把它固定住。
除了 static 默认定位之外，其他定位方式设置了偏移之后，很可能会覆盖在其他元素的上面，比如说，一个包含元素中有两个设置了 absolute 的元素，那么后定义的元素会覆盖在先定义的上面。如果想让先定义的在上面的话，可以给它设置一个较大的 z-index 数值。
所有定位的元素（也就是说除了 static 之外）都可以通过 z-index 设置 z 轴偏移。
如果两个定位元素在两个不同的包含元素中，并且这两个包含元素也设置了 z-index 的话，那么这两个元素的堆叠顺序就取决于包含元素的 z-index
最后分一下类：
定位元素：计算后位置属性为 relative、absolute、fixed、sticky
相对定位元素：计算后位置属性为 relative
绝对定位元素：计算后位置属性为 absolute
粘性定位元素：计算后位置属性为 sticky
