元素在文档流中的位置由(x )元素在HTML中的位置决定。 这是最原始的普通流程。 前面提到的浮动CSS学习笔记08浮动可以更改元素在文档流中的位置。 此外，还可以使用CSS的位置属性重新确定元素在文档流中的位置。
位置属性值静态：默认文档流的布局方式。 块级元素生成方形框作为文档流的一部分，而行内元素生成位于父元素中的一个或多个行框。 (忽略顶、底、左、右或z索引声明。
relative :相对于原始位置偏移。 首先以静态(浮动)方式生成元素。 相对于原始位置，移动方向和宽度由左、右、顶和底属性确定，保留原始占用空间。
absolute :元素框将从文档流中永久删除，并关闭元素在常规文档流中占用的空间。 它根据父容器(需要指定非静态位置的容器)进行定位，就好像元素原本就不存在一样。 放置元素后，将生成块级框，而与正常流中生成的框类型无关。
固定：固定在浏览器所在位置，浏览器滚动时不变。
静态是默认的布局方式，但这里不介绍。
相对关系定位
1 2 3
4 5 CSS相对定位6 7 10 11 12 box1 13 box2 14 box3 15 16
此时，box1和box2按照静态的布局方式在页面上被定位，并相对于当前box2被相对定位
结果，box2的位置相对于box2的原始位置偏移，并且不影响box1和box3的位置
请注意，使用相对对齐时，无论是否移动，元素都占据原始空间。 因此，移动元素会覆盖其他框。
absolute绝对位置
在某些绝对位置，元素的位置不依赖于文档的流动，因此不占用空间。 这与相对位置不同，相对位置实际上被视为普通流位置模型的一部分。 这是因为元素的位置相对于其在正常流中的位置。
1 2 3
4 5 CSS绝对定位6711121314 parent 1516 child 17181920
也将位置属性添加到parent中
效果如下所示，可见child的位置发生了变化
上述现象表明，绝对位置元素的位置相对于最近位置的祖先元素，如果元素中没有位置的祖先元素，则该位置相对于第一个包含块。 在本例中，它指向body元素和parent。
使用绝对对齐需要两个条件
1、父元素必须添加定位属性，一般建议使用position:relative
2、子元素带有绝对位置position:absolute，同时具有方向属性(指left、right、top、bottom属性) )。
固定定位
与absolute定位类型类似，但相对移动的坐标是视图(屏幕中的web窗口)本身。 视图本身是固定的，并且不会随着浏览器窗口滚动条的滚动而变化，除非在屏幕中移动浏览器窗口的屏幕位置或调整浏览器窗口的显示大小。 因此，固定放置的元素始终位于浏览器窗口中视图的某个位置，而不受文档流动的影响。
1 2 3
4 5 CSS固定定位6 9 10 11前12返回段落1
13第2段
14第3段
15 .16段49
17段50
18 19效果如下，返回头条的div总是在同一个位置，博客页面的
也是使用的固定定位。
总结
绝对位置相对于父元素定位，远离文档流，不占用原始位置空间
相对定位是以自身为基准点进行定位，离开原来的位置，但占用原来位置的空间
定位位置以浏览器窗口为基准点放置，始终位于一个位置，不移动