position定位

position属性是指本体相对于上级的定位

position定位又分绝对定位和相对定位。它的默认值是static，意味着元素没有被定位，出现在文档流中应该出现的位置。

如果用position来布局页面，父级元素的position属性必须为relative或absolute。

行元素只有加了position:absolute后才可设置宽和高。

static、relative正常文档流   absolute、fixed脱离文档流

【position:absolute】绝对定位 

        设置了绝对定位的元素，他默认参照浏览器的左上角，配合top、right、bottom、left四个属性进行定位。

通常我们设置两个值就可以定位，如果四个都写，以左上角(left、top)为准。

               我们重新设置position的位置，可以看到，两个元素重叠了，这是因为设置了position:absolute的元素脱离了文档流，飘在了上一层。

d{ position:absolute; top:10px; left:10px;}

<span class="d">这是个span标签</span>

<span >这是另一个span标签</span>

【position:relative】相对定位 

     通常我们不会让元素相对于浏览器绝对定位，元素都有各自的布局容器，我们要让元素其于它的父级来定位！这就要让元素知道哪个是它绝对定位的父级，一般，加了position:relative;的会作为绝对定位元素的父级。

   div{ border:1px solid blue; width:1000px; height:1000px; position:relative;}    父级要加relative，让子级可以以它定位

   img{width:100px; height:100px; position:absolute; bottom:0; right: 0;}   子级要加absolute，说明绝对定位，然后使用TRBL来决定位置

   <div><img src="images/boy.jpg" alt=""/> /div>

   注意：如果不是父子级关系，其它元素为relative，那里面的absolute会以浏览器定位。

【position:fixed】以浏览器参考定位 总是固定于浏览器界面，不会随着界面滚动而滚动

【z-index 】设置元素的堆叠顺序

   拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。

   z-index可以是负值，Z-index 仅能在position上奏效