CSS樣式表一席談之絕對位置與相對定位

來源:互聯網
上載者:User
css|樣式表   定位屬性將是網蟲們開啟幸福之門的鑰匙:

絕對位置

H4 { position: absolute; left: 100px; top: 43px }

  這項CSS規則讓瀏覽器將起始位置精確地定在距離瀏覽器左邊100象素,距離其頂部43象素的位置,請觀看代碼的執行效果。

  注意這裡唯一設定了的是左邊和頂部,也就說,文字將從左至右,從上到下載入瀏覽視窗。

  左邊和頂部屬性很直觀,左邊(left)設定要素距瀏覽器視窗左邊的距離,頂部(top)設定距離瀏覽器視窗頂部的距離。

  設定這些距離時,你可以使用所學過的各種度單位或比例值。使用比例值時,比例值的是相對於母體要素的尺寸。

相對定位

  絕對位置使你能精確地定位要素在頁面的獨立位置,而不考慮頁面其它要素的定位設定。相對定位指你所定位的要素的位置相對於在檔案中所分配的位置。例:

I { position: relative; left: 40px; top: 10px }

  請點擊查看代碼的執行效果

  相對定位的關鍵在於定位了的要素的位置是相對於它通常應在的位置進行定位。如果你停止使用相對定位,則文字的顯示位置將恢複正常。範例。

  使用相對定位時要小心,否則容易將頁面弄得非常亂。

  除了相對定位和絕對位置,你還可以使用static(靜止)參數值。它的使用方法同普通HTML中的定位方法,不能附加特殊的定位設定。

相關文章

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 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。