css position

1.position:absolute (脱离文档流）

  生成绝对定位元素，相对于static定位以外的第一个父元素进行定位(这里指的父元素指的是定位方式为relative或absolute)。如果一直没有找到relative或absolute第一个父元素，则父元素为body。绝对定位的元素的位置通过left, top, right, botttom属性来控制。而其层叠通过css z-index属性定义，很多情况下和relative配合使用

2.position： fixed(脱离文档流)

  生成绝对定位元素，相对浏览器窗口定位。元素的位置通过left， top，right，bottom来控制。

3.position: relative(未脱离文档流，正常位置仍在)

  生成相对定位的元素，相对于其文本流原始正常位置进行定位，也可以使用left, top, right, bottom来定位,它将使用相对定位。相对定位的元素在普通流中进行定位，它将出现在文档流中原本的位置。然而，可以通过设置水平或垂直偏移量，使它相对于原本的位置，偏移指定的距离，移动到新的位置。如果没有设置偏移，或设置的偏移量为 0，那么它仍将保持在原来的位置。

4.position:static

  默认值。没有定位，元素出现在正常的文档流中，忽略top, bottom, right, z-index声明

参考来源：https://blog.youkuaiyun.com/ixygj197875/article/details/79344479

实例：

 

 

 关于calc说明

  动态计算长度值，如top: calc(100% - 100px)