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

桃扇骨 2022-06-02 03:48 116阅读 0赞

背景 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>  
  
  
  
  
<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;