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給我...

相關文章

Beyond APAC's No.1 Cloud

19.6% IaaS Market Share in Asia Pacific - Gartner IT Service report, 2018

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。