完全搞懂css中的position（relative、absol

positioning总共有两种：static-type和relative-type

static-type

只包含一个：默认的position: static

relative-type

包含三种：position: relative, position: absolute, position: fixed，他们之间能够相互作用从而实现一些定位。

之所以叫relative-type是因为能够设置它相对自己（或者的偏移量）的子元素能够按照他们自身，一个父元素或者viewport来各自实现偏移。

所有的relative-type都能够实现下列功能：

• 能够实现上下左右的偏移（offset property）：top、right、bottom和left
• 能够创建一个新的relative-type定位上下文（positioning context），该上下文能够让其子元素中的absolute定位的元素能够“相对地”绝对定位到当前定位上下文实现偏移

position: relative：相对自身元素中心位（会保持占据原来的位置）来说，向上下左右的偏移。并且所有该元素周围的东西都不会受到影响（还在正常的flow里）。

position: absolute：和position: relative类似，但是：1）该元素的原来自身元素中心位不占位，因此下一个元素能够挪到原来元素所占的空间内（不在正常的flow里了） 2）该定位是相对于最近的一个relative-type的父元素来实现定位的

position: fixed : 和position: absolute类似，除了该元素的定位是相对于全局的viewport（整个的可视区域）来的。

快查表

position: static

• Default positioning for all elements.
• Puts element in normal flow.
  position: relative
• Can be offset with top, right, bottom and left.
• Offset relative to itself.
• Creates relative-type positioning context for children.
  position: absolute
• Can be offset with top, right, bottom and left.
• Offset relative to its nearest relative-type positioned parent.
• Creates relative-type positioning context for children.
  position: fixed
• Can be offset with top, right, bottom and left.
• Offset relative to the viewport.
• Creates relative-type positioning context for children.

原文：https://medium.com/@jacobgreenaway12/taming-the-css-beast-master-positioning-5882bad14458