标签：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>格式布局</title> <style type="text/css"> */*针对所有标签起作用*/ { margin:0px;/*去除所有边距magin表示靠近最近的边*/ padding:0px;/*去除所有间距*/ } .box { opacity:0.5; moz-opactiy:0.5; filter:alpha(opacity=50) } </style> </head> <body> position 写在样式表里，也可以写在style里<br /> 样式表要优先于style<br /> 后写的代码要盖住前写的代码<br /> 一、poistion：fixed<br /> 锁定位置，例如有些网站的右下角弹窗广告等<br /> 相对于浏览器的显示页面定位的<br /> <div style="width:100px; height:100px; border::5px solid blue; background-color:#090; right:0px; bottom:0px; position:fixed;">fixed显示位置</div> 二、position：absolute 绝对定位<br /> （1）外层没有position：absolute（或relative）那么div相对于heml页面定位。<br /> （2）外层如果有position：absolute（或relative）那么div相对于外层边框定位<br /> <div style=" border:2px solid red; width:400px; height:200px; ">c </div> <div style=" border:2px solid red; width:400px; height:200px; position:absolute; ">absolute外层无position:absolute <div style="border:1px solid red; width:100px; height:100px; right:30px; bottom:50px; background-color:#FF0;position:absolute"> position：absolute有外层position:absolute </div> </div> <div style="border:1px solid red; width:100px; height:100px; right:30px; bottom:50px; background:#FF0; position:absolute"> position：absolute外层无position </div> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> 三、position：relative<br /> 相对于默认位置static的移动。自我理解为相对于div插入位置重新定义位置<br /> <div style="width:100px; height:100px; border:5px solid blue; background-color:#993; top:30px; left:100px; position:relative"> relative界面图 </div> <br /> <br /> <br /> <br /> 四、分层(z-index:)<br /> 在z轴方向分层，可以理解为一摞纸，层数越高越靠上。<br /> z-index值默认为1，需要位于上面的值大于下面的值<br /> <div style="border:1px solid orange; width:100px; height:100px; left:30px; top:30px; position:relative; background-color:#00C; z-index:2">分层1</div> <div style="border:1px solid orange; width:100px; height:100px; left:50px; bottom:50px; position:relative; background-color:#00C;">分层2</div> <br /> <br /> overflow:hidden;//超出部分隐藏；scroll，显示滚动条<br /> <div style="border:1px solid orange; width:100px; height:100px; left:30px; top:30px; position:relative; background-color:#00C; overflow:hidden;">分层1 <div style="border:1px solid orange; width:100px; height:100px; left:50px; bottom:50px; position:relative; background-color:#00C; ">分层2 </div> </div> <br /> <br /> <br /> <br /> 五、float：left、right<br /> <!--<div style="clear:both"></div> 截断流 --> <div style="border:1px solid orange; width:50px; height:100px; background-color:#00C; float:left;">1</div> <div style="border:1px solid orange; width:50px; height:100px; background-color:#00C; float:right;">2</div><br /> <br /> <br /><br /> <br /> <br /> <br /> <br /> <br /> <br /> 半透明效果<br /> <div style="background:#900;"class="box">透明区域</div> </body> </html>
标签：
原文地址：http://www.cnblogs.com/fengsantianya/p/5521268.html
