CSS定位与层叠

position：static(静态定位)

    当position属性定义为static时，可以将元素定义为静态位置，所谓静态位置就是各个元素在HTML文档流中应有的位置

podisition定位问题。所以当没有定义position属性时，并不说明该元素没有自己的位置，它会遵循默认显示为静态位置，在静态定位状态下无法通过坐标值（top,left,right,bottom）来改变它的位置。

position：absolute(绝对定位)

    当position属性定义为absolute时，元素会脱离文档流，完全不受文档流的影响，根据某个参照物坐标来定位它的位置.当绝对定位元素没有显示的指明top,right,bottom,left定位属性时，它还是暂时未脱离文档流，并受文档流的影响，具有相对定位的特性，但是它在文档流中的位置已经不存在了。如果绝对定位只显示的定位x轴或者Y轴，那它只具备这个方向上的定位能力，另一个方向仍然显示为相对定位的特性。

坐标值：

top:表示定位元素顶边外壁到参照物元素顶部内壁的距离

right:表示定位元素右边外壁到参照物元素右侧内壁的距离

left:表示定位元素左边外壁到参照物元素左侧内壁的距离

bottom:表示定位元素底边外壁到参照物元素底部内壁的距离

<div id="box">box                                                          

  <div id="boxA">boxA</div>  

  <div id="boxB">boxB

   <div id="boxC">boxC</div>

   <div id="boxD">boxD</div>

  </div>

 </div>

#box{

 margin:40px auto;

 width:400px;

 height:400px;

 border:2px red solid;

}

#boxA{

 position:absolute;

 top:100px;

 left:100px;

 width:50px;

 height:50px;

 background: #3E7DB0;

}

 

大盒子box在整个网页中距顶部40px居中显示，但是boxA由于position定位为绝对定位，它脱离了大盒子，距整个网页左边100px顶部100px，当元素定义为绝对定位，可以根据结合它的坐标属性（top,left,bottom,right）来精确定位它的位置

position:relative(相对定位)

相对定位好似一种折中的方法，是在静态定位和绝对定位中去一个平衡点，所谓相对定位就是使被应用的元素不脱离文档流，却能够通过坐标值以原始位置为参照物进行偏移。

坐标值：

top:表示定位元素顶边外壁到原始位置顶部外壁的距离

right:表示定位元素右边外壁到原始位置元素右侧外壁的距离

left:表示定位元素左边外壁到原始位置元素左侧外壁的距离

bottom:表示定位元素底边外壁到原始位置元素底部外壁的距离

1 <div id="box">

2      <div id="boxA">boxA</div>

3      <div id="boxB">boxB

4       <div id="boxC">boxC</div>

5       <div id="boxD">boxD</div>

6         </div>

7     </div>

 

#box{

 margin:40px auto;

 width:400px;

 height:400px;

 border:2px red solid;

}

#boxA{

 position:relative;

 top:100px;

 left:100px;

 width:50px;

 height:50px;

 background: #3E7DB0;

}

#boxB{

 width:50px;

 height:150px;

 background: #B9C8C5;

}

#boxC{

 width:50px;

 height:50px;

 background: #1D92C8;

}

#boxD{

 width:400px;

 height:50px;

 background: #086499;

}

大盒子box在整个网页中距顶部40px居中显示，当元素boxA由于position定义为相对定位，相对于它本身的位置的位置进行偏移，据原先的位置左100px和顶部100px，当遇到文档流boxD时，它会覆盖boxD。相对定位虽然偏离了原始位置，但是它的原始位置所占据的空间仍然保留着，并没有被其它元素所占据。

position：fixed(固定定位)

固定定位是绝对定位的一种特殊形式，它是以浏览器窗口作为参照物来定义网页元素，如果定义某个元素固定显示，则该元素不在受文档流的影响。他始终以浏览器窗口来定位自己显示的显示位置，不管浏览器窗口如何滚动，也不管浏览器窗口大小如何变化，该元素都会显示在浏览器窗口内。通俗的说就是以浏览器窗口的四条边作为坐标系来定位元素的位置。

1 <div id="box">box </div> 

2 <div id="fixed">fixed</div>

 1 #box{

 2  margin:40px auto;

 3  width:400px;

 4  height:400px;

 5  border:2px red solid;

 6  position:fixed;

 7 left:100px;

 8 top:100px; 

 9 }

10 #fixed{

11  height:4000px;

12 }

当把box定义为固定定位时，box永远都是在浏览器窗口内，fixed属性还可通过left，right,top,bottom来控制从流浪器不同边框来进行定位。

相对定位(relative)与绝对定位(absolute)： 

<div id="box">box

  <div id="boxA">boxA</div>

  <div id="boxB">boxB

   <div id="boxC">boxC</div>

   <div id="boxD">boxD</div>

  </div>

 </div>

如果box把 position属性定义为relative，只有它的子元素boxA和boxB position属性定义为absolute才能相对box定位，而他的孙子元素boxC和boxD把position定义为absolute并不能相对box来定位。但是如果把boxB的position属性定义为relative，它底下的子元素boxC和boxD就能相对于父元素boxB来定位，所以，把position属性定义为relative的元素，只有它的子元素才能相对它定位，孙子元素并不能相对它定位。相对定位与绝对定位的结合使用可以更加精确的控制网页元素，设计出更强大的布局效果。

position属性定位小工具： www.linxz.de/css_tool/position_demo.html

层叠：

css可以通过 z-index 属性来排列不同定位元素之间的层叠顺序，该属性可以设置任何整数值，数值越大，所排列的顺序越靠前。

1  <div id="box">box

2   <div id="boxA">boxA</div>

3   <div id="boxB">boxB</div>

4   <div id="boxC">boxC</div>

5  </div>

 1 #boxA,#boxB,#boxC{

 2  width:100px;

 3  height:200px;

 4  position:absolute;

 5 }

 6 #boxA{

 7  background: #086499;

 8  z-index:1;

 9  left:100px;

10 }

11 #boxB{

12  top:50px;

13  left:50px;

14  background: #B9C8C5;

15  z-index:2;

16 }

17 #boxC{

18  top:100px;

19  background: #1D92C8;

20  z-index:3;

21 }

boxC排在最上面，boxB在最中间，boxA在最后。z-index的值越大越靠前。

第一次写博客，写的不好，请各位看官多多指正。