css盒子模型之定位
1、static 定位
HTML元素的默认值，即没有定位，元素出现在正常的流中。
静态定位的元素不会受到top, bottom, left, right影响。
2、Fixed 定位
元素的位置相对于浏览器窗口是固定位置。
即使窗口是滚动的它也不会移动：
Fixed定位使元素的位置与文档流无关，因此不占据空间。
Fixed定位的元素和其他元素重叠。
3、Relative 定位
相对定位元素的定位是相对其正常位置。
立即学习“前端免费学习笔记（深入）”；
可以移动的相对定位元素的内容和相互重叠的元素，它原本所占的空间不会改变。
相对定位元素经常被用来作为绝对定位元素的容器块。
4、Absolute 定位
绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于:
Absolutely定位使元素的位置与文档流无关，因此不占据空间。
Absolutely定位的元素和其他元素重叠。
重叠的元素
元素的定位与文档流无关，所以它们可以覆盖页面上的盒子模型0元素
盒子模型1盒子模型2指定了一个元素的堆叠顺序（哪个元素应该放在前面，或后面）
一个元素可以有正数或负数的堆叠顺序：
具有更高堆叠顺序的元素总是在较低的堆叠顺序元素的前面。
注意： 如果两个定位元素重叠，没有指定z - index，最后定位在HTML代码中的元素将被显示在最前面。
相对与绝对定位的区别
绝对定位（absolute）：
1、将被赋予此定位方法的盒子模型3从文档流中拖出，使用left，right，top， bottom等属性相对于其最接近的一个最有定位设置的父级对象进行绝对定位，如果对象的父级没有设置定位属性，即还是遵循HTML定位规则的，则依据 body 对象左上角作为参考进行定位。
2、绝对定位对象可层叠，层叠顺序可通过 z-index 属性控制，z-index值为无单位的盒子模型4，大的在最上面，可以有负值。
相对于最近的非标准流定位，原来的位置消失，被后边的位置所顶替
相对定位（relative）：
相对于原来的位置，但是原来的位置仍然保留。
对象不可层叠，依据left，right，top，bottom等属性在正常文档流中偏移自身位置。
同样可以用z-index分层设计。
[教程] 彻底弄懂CSS盒子模式四(绝对定位和相对定位)
示例：
效果图：
