DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS詳解 >> 學習筆記 DIV定位用法詳解
學習筆記 DIV定位用法詳解
編輯:CSS詳解     

你對DIV定位的概念和用法是否了解,這裡和大家分享一下,主要包括無定位,相對定位和絕對定位等內容。

DIV定位用法詳解

1.position:static|無定位

position:static是所有元素定位的默認值,一般不用注明,除非有需要取消繼承的別的定位
example:

  1. #div-1{
  2. position:static;
  3. }

2.position:relative|相對定位

使用position:relative,就需要top,bottom,left,right4個屬性來配合,確定元素的位置。
如果要讓div-1層向下移動20px,左移40px:
example:

  1. #div-1{
  2. position:relative;
  3. top:20px;
  4. left:40px;
  5. }

如果用到相對定位,緊隨他的層divafter是不會出現在div-1的下方,而是和div-1在同一個高度出現。可見,position:relative;並不是很好用。

3.position:absolute|絕對定位

使用position:absolute;,能夠很准確的將元素移動到你想要的位置,
讓我將div-1a移動到頁面的右上角:
example:

  1. #div-1a{
  2. position:absolute;
  3. top:0;
  4. right:0;
  5. width:200px;
  6. }

使用絕對定位的div-1a層前面的或者後面的層會認為這個層並不存在,絲毫不影響到他們。所以position:absolute;用於將一個元素放到固定的位置很好用,但是如果需要div-1a層相對於附近的層來確定位置就不要實現了。

*這裡有個winie的bug需要提到,就是如果為絕對定位的元素定義一個相對的寬度,那麼在IE下它的寬度取決於父元素的寬度而不是整個頁面的寬度。

4.position:relative+position:absolute|絕對定位+相對定位

如果給父元素(div-1)定義為position:relative;子元素(div-1a)定義為position:absolute,那麼子元素(div-1a)的位置將相對於父元素(div-1),而不是整個頁面。
讓div-1a定位於div-1的右上角:
example:

  1. <dividdivid="div-1">
  2. <dividdivid="div-1a">
  3. thisisdiv-1aelement.
  4. </div>
  5. thisisdiv-1element.
  6. </div>
  7. #div-1{
  8. position:relative;
  9. }
  10. #div-1a{
  11. position:absolute;
  12. top:0;
  13. right:0;
  14. width:200px;
  15. }

【編輯推薦】

  1. 解決DIV列高度自適方法及優缺點
  2. CSS中margin邊界疊加問題及解決方案
  3. CSS樣式表高效使用八大秘訣
  4. CSS+DIV實現圓角表格的三種方法
  5. 實現CSS垂直居中的五大方法及優缺點
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved