CSS Position（定位）
除非专门指定，否则所有框都在普通流中定位。也就是说，普通流中的元素的位置由元素在 HTML 中的位置决定。
块级框从上到下一个接一个地排列，框之间的垂直距离是由框的垂直外边距计算出来。
行内框在一行中水平布置。可以使用水平内边距、边框和外边距调整它们的间距。但是，垂直内边距、边框和外边距不影响行内框的高度。由一行形成的水平框称为行框（Line Box），行框的高度总是足以容纳它包含的所有行内框。不过，设置行高可以增加这个框的高度。
position 属性指定了元素的定位类型。
position 属性的五个值：
- static
- relative
- fixed
- absolute
- Inherit
元素可以使用的顶部，底部，左侧和右侧属性定位。然而，这些属性无法工作，除非是先设定position属性。他们也有不同的工作方式，这取决于定位方法。
① static 定位
HTML元素的默认值，即没有定位，元素出现在正常的流中。
静态定位的元素不会受到 top, bottom, left, right影响。
position:static;
② fixed 定位
元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。元素的位置相对于浏览器的位置是固定位置。即使窗口是滚动的它也不会滚动。
position:fixed;
top:30px;
注意： Fixed 定位在 IE7 和 IE8 下需要描述 !DOCTYPE 才能支持.
Fixed定位使元素的位置与文档流无关，因此不占据空间。
Fixed定位的元素和其他元素重叠。
③ relative 定位
相对定位元素的定位是相对其正常位置。
position:relative; left:-20px 或 right：20px; /*相对于其正常位置向左移动20px*/ left:20px; /*相对于其正常位置向右移动20px*/
可以移动的相对定位元素的内容和相互重叠的元素，它原本所占的空间不会改变。
相对定位元素经常被用来作为绝对定位元素的容器块。
④ absolute 定位
绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于body。
absolute定位使元素的位置与文档流无关，因此不占据空间。
position：absolute； left：100px 或 right：-100px； /*距离左边的页面100px*/ top：140px; /*距离页面的顶部150px*/
⑤ Inherit 定位
继承父元素的position值。
图文讲解
首先设置4个div：
<body> <div class="div1">第一个div</div> <div class="div2">第二个div</div> <div class="div3">第三个div</div> <div class="div4">第四个div</div> </body>
添加背景色，效果如下：
给第二个div设置absolute：
.div2{ height:100px; background-color: blueviolet; position:absolute; top:50px; left:50px; }
效果如图：
第二个div设置了absolute,则该div的宽度就由文本决定，且下面的div会上移占据之前第二个div的位置，top和left是相对于离它最近且不是static定位的父元素来定位的，在此div2因为没有父元素，所以第二个div相对于根元素即html元素来定位。
将第二个div设置为relative：
.div2{ height:100px; background-color: blueviolet; position:relative; left:50px; top:50px; }
设置relative的div不会影响其他div的位置，且top和left是相对于它原本自身的位置来定位。
总结：
Absolution：元素会脱离文档流，定位是相对于离它最近的且不是static定位的父元素而言，若该元素没有设置宽度，则宽度由元素里面的内容决定，且宽度不会影响父元素，定位为absolution后，原来的位置相当于是空的，下面的的元素会来占据。
Relative：元素仍处于文档流中，定位是相对于原本自身的位置，若没有设置宽度，则宽度为父元素的宽度，该元素的大小会影响父元素的大小。
z-index 属性
元素的定位与文档流无关，所以它们可以覆盖页面上的其它元素。
z-index属性指定了一个元素的堆叠顺序（哪个元素应该放在前面，或后面）。
一个元素可以有正数或负数的堆叠顺序。
position:absolute; left:0px; top:0px; z-index:-1;
属性值
| 值 | 描述 |
|---|---|
| auto | 默认。堆叠顺序与父元素相等。 |
| number | 设置元素的堆叠顺序。 |
| inherit | 规定应该从父元素继承 z-index 属性的值。 |
具有更高堆叠顺序的元素总是在较低的堆叠顺序元素的前面。
注意： 如果两个定位元素重叠，没有指定z - index，最后定位在HTML代码中的元素将被显示在最前面。
