position的应用(双层背景，靠底边布局)

背景 Div的应用，以及  div使用下对齐用法：

   <div>
  
       <!--背景应用-->
        <div id="aaa" style="width: 80%; margin: 0 auto; z-index: 999; position: relative; background: black;">
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
        </div>
         <!--下背景-->
        <div style="width: 100%; z-index: 10; position: relative; height: 200px; top: -100px; background: blue;">
                <div class="left">
                <div>
                <div class="middle">
                <div>
                <div class="right">
                <div>
        </div>
<!--
如果加一个层包住这两个层，并且要给外层加边框
则会出现 背景下面  多出来空白  然后是边框。
解决办法是：
将下背景的高度设置成为：内部用的高度(left,middle,right) -  隐藏的高度
-->
       
       
        <!--始终下对齐-->
        <div style="clear:both;">
        </div>
     <div style="background:#0F9; position:relative;">
            <br/>
             <br/>
            <br/>
             <br/>
            <br/>
             <br/>
            <br/>
             <br/>
            <br/>
             <br/>
            <br/>
             <br/>
            <br/>
             <br/>
            <br/>
             <br/>
            <br/>
             <br/>
            <br/>
             <br/>
            <br/>
             <br/>
            <br/>
             <br/>
            <br/>
             <br/>
            <br/>
             <br/>
            <br/>
             <br/>
            <div style="background:#999; height:100px; width:100%; position:absolute; bottom:0px;">
            </div>
        </div>
       
</div>


上下两个层面     完全分开
    <div style="width:300px; margin:0 auto;">
        <div style="position: relative; float:left;">
               <div style="position:absolute; background:#CCC; width:100px; height:50px; float:left">上层</div>
        </div>
        <div style="background:#F00; width:300px; height:50px; float:left; margin-top:10px;">
               底层
        </div>
        <div style="clear:both">
        </div>
        <div>
            其他文字测试
        </div>
    </div>



这样浮动的应用：
如果要    只针对该层
则   要在外层的样式中加入：
position:relative;