static

position属性用来控制元素的定位方式，在所有元素未设置position属性时，它们将按照书写顺序在文档中自然排列：block 元素会占据单独的一行，inline 元素会与相邻的 inline 元素处于同一行。

元素未设置position属性时默认为static属性，元素的排列方式由浏览器决定，四个位置属性（top, right, bottom和left）不会生效。

除了static外，另外三个传统的定位方式（relative, absolute和fixed）都需要一个定位基点，然后指定元素相对于这个定位基点的位置。

relative

相对于static默认位置进行偏移，偏移量由top, right, bottom和left四个属性指定。

指定属性就是相对于原始位置的相应边界向元素内部方向进行偏移，例如top表示相对于原始位置上边向下偏移。

absolute

相对于某个祖先节点的绝对定位，这个祖先节点是离该节点最近的非static定位的节点。

可以看到，红色方块相对于黄色方块向下发生了 10px 的偏移，如果将黄色方块的定位改为static，那么红色方块将会相对于html元素向下偏移。

absolute定位的元素不在正常文档流中占据空间，因为它们只依赖于定为基点的位置，不会影响文档流中其它元素的位置，所以可能与正常文档流中其它元素重合。

fixed

相对于视口的偏移，可以将元素固定在窗口的某个位置上。

脱离文档流。

sticky

一种特殊的定位，可以实现动态固定等效果。

动态固定

<div style="width: 400px; height: 400px; background: greenyellow; overflow: auto">
  <div style="height: 1000px; background: burlywood">
    <div style="height: 100px; background: gray"></div>
    <div style="width: 200px; background: green; position: sticky; top: 0">
      sticky bar
    </div>
  </div>
</div>

在待滚动元素中定义一个sticky的子元素，使用top：0指定在该子元素达到视口上界时固定该元素的位置。

必须指定top, right, bottom和left中的一个，指定何时将元素的位置固定在视口的哪一个位置。

当粘性元素到达固定位置之前，以及可滚动的父元素完全滚出视口之后，粘性元素相当于使用relative布局。