基本属性：
-
inherit：规定应该从父元素继承position属性。 -
static：默认值，没有定位，元素出现在正常的流中（忽略top / bottom // left / right / z-index声明。） -
relative：生成相对定位的元素，相对于元素本身正常的位置进行定位，因此：left: 20px会像元素的left位置添加20px。 -
absolute：生成绝对定位元素，相对于static定位以外的第一个祖先元素（offset parent）进行定位，元素的位置通过left / top / right/ bottom属性进行规定。如果父元素有position: relative / position: absolute;/ position: fixed就相对于对父元素进行绝对定位。 -
fixed：生成绝对定位的元素，相对于浏览器窗口进行定位，元素的位置通过left / top / right / bottom属性进行规定。 -
sticky：CSS3新属性，表现类似于position: relative;和position: fixed的合体，目标区域在屏幕中可见。 - 只有定位元素才可以设置
top / bottom // left / right / z-index。
普通流与相对定位：
- 普通流是默认的定位方式，在普通流中元素框的位置由元素在HTML中的位置决定，元素
position属性为static或继承来的static时就会按照普通流定位，这也是我们最常见的方式。 - 相对定位比较简单，对应
position属性的relative值，如果对一个元素进行相对定位，它将出现在他所在的位置上，然后可以通过设置垂直或水平位置，让这个元素相对于他自己原来的位置移动，在使用相对定位时，无论元素是否移动，元素在文档流中占据原来空间，只是表现出来的位置会改变。
作用：icon的偏移。
绝对定位(position:absolute)与固定定位(position:fixed)
- 相对定位可以看做特殊的普通流定位，元素位置相对于它在普通流中位置发生变化，而绝对定位使元素的位置与文档流无关，也不占据文档流空间，普通流中元素的布局就像绝对定位的元素不存在一样。
-
absolute绝对定位的元素的位置是相对于距离最近的非static祖先元素位置决定的。如果元素没有已定位的祖先元素，那么他的位置就相对于初始包含块HTML（根节点）来定位。
代码示例： - 因为绝对定位与文档流无关，所以绝对定位的元素可以覆盖在页面上其他的元素，可以通过
z-index控制属性叠放顺序，z-index越高，元素位置越靠上。浮动元素对其他元素会产生影响，但是绝对定位的元素不会影响其他元素，绝对定位的元素就像是不存在一样。 -
fixed固定定位，固定定位是绝对定位的一种，固定定位的元素也不包含在普通文档流中，差异：固定定位相对于窗口定位。（viewport） -
position:absolute时当left:0;top:0是相对于内边框定位的，如果left:auto;top: auto就是相当于内边距padding定位的。代码示例： - 绝对定位中，默认
top:auto;left:auto。所以在每次使用绝对定位的时候，最好写上left:0;top:0。使其沿着父容器的内边框定位。 - 所以最好还是设置
top / bottom // left / right / z-index的值。使他沿着内边框做定位。 - 绝对定位宽度收缩：设置
position: absolute之后，宽度就会变成内容的宽度，所以要给宽度一个属性值。
浮动元素和绝对定位元素的比较：
- 都脱离文档流。
- 浮动元素会对其他浮动元素产生影响，会对旁边处于正常流中的文本产生影响。
- 绝对定位的元素：文档流中的其他元素完全看不到这个绝对定位的元素，认为他不存在，所以自己的位子自己计算，不同的绝对定位元素之间也互相看不到。
宽度100%的意义
尽量不要用width: 100%，width:100%的作用是让自己内容的宽度和父容器内容的宽度是一样的，但是在浮动定位中，自己的元素设置Border / margin / padding，会使其宽度已经大于父容器内容的宽度，并且位置也发生了偏移。
绝对定位，相对定位，固定定位的区别
static relative定位不脱离文档流，relative相对定位在某父元素下指定left right top等是嵌入到页面中
Absolute绝对定位，脱离文档流，，没有父元素，上下左右设置是针对于浏览器窗口，不占据位置，会随着窗口大小与页面一起改变
Fixed固定定位，只针对浏览器窗口定位，上下左右，不会随着窗口大小改变，固定不变，例如固定位置的小广告。
绝对定位和BFC：
绝对定位能形成BFC可用来清除浮动，可用来阻止外边距合并。
[BFC知识点：]([https://www.jianshu.com/p/5b9844de9e83]
绝对定位垂直水平居中：
.ct {
position: relative;
height: 200px;
border: 20px solid;
padding: 20px;
margin: 20px;
}
.box {
position: absolute;
left: 50%;
top: 50%;
margin-left: -50px;
margin-top: -25px;
width: 100px;
height: 50px;
background: red;
}
position: relative和负margin的区别：
- 负
margin会使文档流的位置发生偏移。 -
position:relative不会改变文档流的位置。
