本文不对 position 进行文档式的总结，而且总结一些你可能忽略或不了解的 position 知识点
定位类型
以下内容来自MDN，是理解position的重要概念和基础
-
定位元素（positioned element） 是其计算后位置属性为
relative,absolute,fixed或sticky的一个元素（换句话说，除static以外的任何东西）。 -
相对定位元素（relatively positioned element） 是计算后位置属性为
relative的元素。 -
绝对定位元素（absolutely positioned element） 是计算后位置属性为
absolute或fixed的元素。 -
粘性定位元素（stickily positioned element） 是计算后位置属性为
sticky的元素。
偏移属性的优先级
你是否遇到过这种情况：同时设置了 top 和 bottom，期待元素能够被撑开，但是却发现只有 top 生效。这就是偏移属性的优先级问题。
注意：这里我将 top、bottom、left、right 定义为偏移属性。
按照是否能够将元素尺寸撑开，将偏移属性的优先级规则分为两种情况：
-
元素能够被撑开
条件：
height和width被设定为 auto 的绝对定位元素规则：被绝对定位的元素可以通过指定
top和bottom，保留height未指定（即auto），来填充可用的垂直空间。它们同样可以通过指定left和right并将width指定为auto来填充可用的水平空间。 -
元素不能被撑开
条件：除上述情况的其他情况
规则：
top比bottom优先；- 当
direction为ltr时，left比right优先；当direction为rtl时，反之。
强大的 sticky 属性值
你可能并不知道 position 有 sticky 这样一个属性值，或者知道但是很容易忽略它。
为什么说它强大，因为刚了解它的用法时，就发现它能很简单地实现一个看似不那么简单的效果，可以参考如下这个来自 MDN 的 demo：
See the Pen Sticky positioning by Šime Vidas (@simevidas) on CodePen.
如何理解 sticky 这个属性值呢？
首先理解下这个单词的意思，sticky 意为 “粘性的”，事实上它的表现也符合它的意思——当元素到达指定的位置处就会被 “粘住”（固定）。
官方一点的理解是，sticky 元素的表现就像是在 relative 和 fixed 之间切换，至于表现为哪种，取决于元素所处的位置。当元素还没到达偏移属性所指定的位置时，表现为 relative ；反之表现为 fixed 。
再来看看一个更简单的 demo（参考 W3C），是不是就能理解并马上用起来了：
See the Pen ZEYBNQd by YOUNGmaxer (@youngmaxer) on CodePen.
再深入了解一下 sticky
值得注意的是，你可能会遇到以下情况：
- sticky 并没有生效；
- 想实现挤占效果；
那么你需要更清楚地了解一下 position: sticky 的一些细节和特性，不妨参考张鑫旭大佬的总结：
- 父级元素不能有任何
overflow:visible以外的overflow设置，否则没有粘滞效果。因为改变了滚动容器（即使没有出现滚动条）。因此，如果你的position:sticky无效，看看是不是某一个祖先元素设置了overflow:hidden，移除之即可。- 父级元素也不能设置固定的
height高度值，否则也没有粘滞效果。- 同一个父容器中的sticky元素，如果定位值相等，则会重叠；如果属于不同父元素，则会鸠占鹊巢，挤开原来的元素，形成依次占位的效果。
- sticky定位，不仅可以设置
top，基于滚动容器上边缘定位；还可以设置bottom，也就是相对底部粘滞。如果是水平滚动，也可以设置left和right值。
