CSS定位組件CSS 定位方式

來源:互聯網
上載者:User
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給我...

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.