position和float详解 #9

* **static**: 这个是position属性的默认值，就是元素遵从普通文档流的位置布局

* **relative**: 俗称相对定位，是说相对于该元素在**普通文档流中默认的位置进行移动，并没有脱离普通文档流**

* **absolute**: 俗称绝对定位，相对于**该元素的最近的一个非static定位的祖先元素的位置**进行定位，**可以设置外边距margin，并且不会发生坍塌**，设置绝对定位的元素会脱离普通文档流，在普通文档流里面不会占据空间

* **fixed**: 相对于**浏览器屏幕视窗定位，不会随着屏幕的滚动而改变位置**，会脱离普通文档流，在普通文档流不占据空间

* 对display属性的影响：
      1. **display**: relative**不会改变**元素的display属性，但是**fixed和absolute会改变**元素的display属性，**行内元素**的display会被改成block属性，当然如果**行内元素**的display属性设置了**block，inline-block， table**等值的话，就**不会改变元素的display属性**，这里插播一句float也会改变display属性，和absolute差不多，具体测试的话可以自己通过**widnow.getComputedStyle()**这个API来得到计算后的各个属性的值

      2. **z-index**: 在IE6/7中，z-index属性会失效

* 基于盒模型（margin, border, paddind, content）的基础解释定位起点：

    absolute: 上面说的是相对该元素的最近的一个非static定位的祖先元素的位置，那么这个位置具体指什么呢？包括该元素的margin? border? padding? 还是什么样的呢？下面看一下代码的演示实例

        .parent {
          margin: 10px;
          padding: 10px;
          border: 5px solid blue;
          background: red;
          height: 100px;
          position: relative
        }

        .child {
          position: absolute;
          left: 0;
          width: 200px;
          height: 20px;
          background: yellow;
        }

        <div class="parent">
          <div class="child"></div>
        </div>