一、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)
}
时间： 2024-10-22 08:22:11