CSS定位组件CSS 定位方式


答案：在HTML中并无法直接定义要显示的文字或图文件在画面的那个位置...  
只能一顺序来显示...  
但是CSS提供3个新的性质运用..  
top,left,position...  
left相当于x轴，top相当于y轴，position则是绝对(abslute)或者相对(relative)位置..  
举个例子：  
<html>  
<head>  
<meta content="text/html; charset=big5" http-equiv=Content-Type>  
<title></title>  
</head>  
<body>  
<div style="position:relative;top:250;left:250">显示在(250,250)的位置  
<div style="position:relative;top:50;left:50">显示在(300,300)的位置</div>  
</div>  
</body>  
</html>  
position会以上一个对象来判断，若是相对则会参考上一个对象的位置来显示...  
绝对则是以(0,0)为基准..  

另外CSS还有一个z-index的性质...  
这个性质就像是z轴一样，可以让网页有立体感，或者说是有层次的感觉....  
设定值由 -2|1|0|1|2 (没记错的话)  
数值越小表示越底层....  

用法如下：  

<html>  
<head>  
<meta content="text/html; charset=big5" http-equiv=Content-Type>  
<title></title>  
<style>  
.style5 { color:black;  
font-size=42pt;  
font-style:italic;  
font-family:"bart normal";  
position:absolute;  
z-index=0;  
top:265;  
left:182;  
width:450;  
height:80;  
}  
.style7 { font-size=11pt;  
font-style:italic;  
color:white;  
font-family:"arial black";  
position:absolute;  
top:305;  
left:440;  
z-index=2;  
width:280;  
height:60;  
}  
</style>  
</head>  
<body>  
<div class="style5"><b>DHTML@ ASP</b></div>  
<div class="style7"><span style="font-size=22pt">　　Asp </span>Web Database　</div>  
</body>  
</html>  

执行例子你可以看见两行文字有上下之分....  
因为z-index一个设定是0，另一个则是2....  

对于CSS 定位方式设定大概就是这样...  
这些范例在我的网页都有....有兴趣可以看看...  
如果以上的内容有误或着有问题的话..  
欢迎你mail给我...
上一个：CSS字体的详细设定
下一个：CSS字型的设定
更多图片编程知识: