今天重新看了一下关于css的position布局，MDN受益良多。
position粗略地来说分为五种布局：static， relative, absuolate , fixed(类似于absulate), sticky，其中比较不常用的就是sticky布局（粘性布局），因为兼容性的问题，所以现在浏览器对他的兼容性不是很好。
- static布局 贯穿于文档流中，其中top, right, bottom, legt 和z-index属性对其无效，static布局是默认的布局
- relative布局 组件仍然在文档流中中，它的位置是相对于他自身值的top, right, bottom ,left的。 这种偏移量不会影响其他组件的位置。再在不改变页面布局的前提下调整元素位置。position:relative 对 table-*-group, table-row, table-column, table-cell, table-caption 元素无效。
- absolute布局 不为元素预留空间，通过指定元素相对于非static定位祖先元素的偏移来确定位置。可以设置margin（外边距），并且不会与其他外边距合并。
- fixed 布局 不为元素预留空间，通过指定元素与屏幕窗口的位置来指定元素位置。元素在屏幕滚动时会保持位置不变。打印时，元素会出现在每页固定的地方。
- sticky布局 根据正常流计算盒位置，然后相对于该元素在流中的flowroot和containing block定位。
