一、position：fixed
锁定位置（相对于浏览器的位置），例如有些网站的右下角的弹出窗口。
二、position：absolute
1.外层没有position：absolute（或relative）；那么div相对于浏览器定位。
2.外层有position：absolute（或relative）；那么div相对于外层边框定位
三、position：relative
相对位置。
如下图，相对于把此div包含住的div的某个位置进行固定。如果外层没有包含他的，那就相对于浏览器进行相对位置的固定。
四、分层（z-index）
在z轴方向分层，可以理解为分成一摞纸，层数越高越靠上。
五、
Left、right时不用给他规定位置（left、top），直接相对于浏览器。若外部被包裹，相对于外部div的除去一行的位置的左上或右上显示。
源代码如下：
CSS样式表：
<style type="text/css"> * { margin:0px; padding:0px;} #a {/*position的fixed是针对于浏览器的显示区域的*/ border:5px solid blue;/*边框宽度，边框样式，边框颜色*/ width:100px; height:100px; background-color:#0F0;/*div背景颜色*/ position:fixed;}/*div固定在上面两个所规定好的位置*/ #aa { border:5px solid blue;/*边框宽度，边框样式，边框颜色*/ width:100px; height:100px; background-color:#0F0;/*div背景颜色*/ left:20px; top:50px; position:relative; } #b { border:5px solid blue;/*边框宽度，边框样式，边框颜色*/ width:50px; height:50px; margin:10px; background-color:#0F0;/*div背景颜色*/ right:50px; bottom:50px; position:absolute; } #c { border:3px double #FF0000; width:400px; height:200px; } #d { border:3px double #FF0000; width:400px; height:200px; position:absolute;/*外层上给固定一个position，让里面的bdiv针对ddiv进行位置判定*/ } </style>
<title>无标题文档</title> <link href="4.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="c">c</div> <div id="d">d <div id="b">b</div> </div> <div id="a">a</div> <div id="aa">aa</div> </body> </html>
效果如下：
半透明效果：
<div class="box">透明区域<div>
在样式表中的代码为：
.box
{
opacity:0.5; -moz-opacity:0.5 ; filter:alpha(opacity=50)
}