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

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

絕對位置

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

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

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

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

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

相對定位

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

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

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

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

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

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

相關文章

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.