https://blog.csdn.net/fe_flyfish/article/details/74279163

position的值relative和absolute定位原点是？

absolute生成绝对定位的元素，相对于值不为 static的第一个父元素进行定位。

fixed （老IE不支持）生成绝对定位的元素，相对于浏览器窗口进行定位。

relative生成相对定位的元素，相对于其正常位置进行定位。

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

inherit规定从父元素继承 position 属性的值。

 static（静态定位）

对象遵循标准文档流中，top, right, bottom, left 等属性失效。

relative（相对定位）

对象遵循标准文档流中，依赖top, right, bottom, left 等属性相对于该对象在标准文档流中的位置进行偏移，同时可通过z-index定义层叠关系。

absolute（绝对定位）

对象脱离标准文档流，使用top, right, bottom, left 等属性进行绝对定位（相对于static定位以外的第一个父元素进行绝对定位） 同时可通过z-index定义层叠关系。

fixed（固定定位）

对象脱离标准文档流，使用top, right, bottom, left 等属性进行绝对定位（相对于浏览器窗口进行绝对定位）同时可通过z-index定义层叠关系。

标准文档流

标准文档流指在不使用其他与排列和定位相关的特殊CSS规则时，元素的默认排列规则。

HTML文档中的元素可以分为两大类：行内元素和块级元素。

1.行内元素，是DOM树中的一个节点。不占据单独的空间，依附于块级元素，行内元素没有自己的区域。

2.块级元素，是DOM树中的一个节点。总是以块的形式表现出来，并且跟同级的兄弟块依次竖直排列，左右自动伸展，直到包含它的元素的边界，在水平方向不能并排。

盒子在标准流中的定位原则：

margin控制的是盒子与盒子之间的距离，padding存在于盒子的内部它不涉及与其他盒子之间的关系和相互影响问题，因此要精确控制盒子的位置，就必须对margin有更深入的了解。

（1）行内元素之间的水平margin

当两个行内元素紧邻时，它们之间的距离为第一个元素的右margin加上第二元素的左margin。 （2）块级元素之间的竖直margin

两个竖直排列的块级元素，它们之间的垂直距离不是上边的第一个元素的下margin和第二个元素的上margin的总和，而是两者中的较大者。这在实际制作网页的时候要特别注意。

（3）嵌套盒子之间的margin

这时子块的margin以父块的content为参考进行排列。

（4）margin设为负值

会使设为负数的块向相反的方向移动，甚至会覆盖在另外的块上。