国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

css position: absolute、relative詳解

h9911 / 2349人閱讀

摘要：在使用相對定位時，無論元素是否進行移動，元素依然占據原來的空間。放置絕對定位對象在可視區域之外會導致滾動條出現。相對定位是相對于元素在文檔流中初始位置的，而絕對定位是相對于最近的已經定位的祖先元素。

CSS2.0 HandBook上的解釋：

設置此屬性值為 absolute 會將對象拖離出正常的文檔流絕對定位而不考慮它周圍內容的布局。假如其他具有不同 z-index 屬性的對象已經占據了給定的位置，他們之間不會相互影響，而會在同一位置層疊。此時對象不具有外補丁( margin )，但仍有內補丁( padding )和邊框( border )。
要激活對象的絕對(absolute)定位，必須指定 left ， right ， top ， bottom 屬性中的至少一個，并且設置此屬性值為 absolute 。否則上述屬性會使用他們的默認值 auto ，這將導致對象遵從正常的HTML布局規則，在前一個對象之后立即被呈遞。

TRBL屬性（TOP、RIGHT、BOTTOM、LEFT）只有當設定了position屬性才有效。
當設定position:absolute
如果父級（無限）沒有設定position屬性，那么當前的absolute則結合TRBL屬性以瀏覽器左上角為原始點進行定位
如果父級（無限）設定position屬性，那么當前的absolute則結合TRBL屬性以父級（最近）的左上角為原始點進行定位。

當設定position: relative
則參照父級（最近）的內容區的左上角為原始點結合TRBL屬性進行定位（或者說相對于被定位元素在父級內容區中的上一個元素進行偏移），無父級則以BODY的左上角為原始點。相對定位是不能層疊的。在使用相對定位時，無論元素是否進行移動，元素依然占據原來的空間。因此，移動元素會導致它覆蓋其他框。

一般來講，網頁居中的話用Absolute就容易出錯，因為網頁一直是隨著分辨率的大小自動適應的，而Absolute則會以瀏覽器的左上角為原始點，不會應為分辨率的變化而變化位置。有時還需要依靠z-index來設定容器的上下關系，數值越大越在最上面，數值范圍是自然數。當然有一點要注意，父子關系是無法用z-index來設定上下關系的，一定是子級在上父級在下。

設置此屬性值為 relative 會保持對象在正常的HTML流中，但是它的位置可以根據它的前一個對象進行偏移。在相對(relative)定位對象之后的文本或對象占有他們自己的空間而不會覆蓋被定位對象的自然空間。與此不同的，在絕對(absolute)定位對象之后的文本或對象在被定位對象被拖離正常文檔流之前會占有它的自然空間。放置絕對(absolute)定位對象在可視區域之外會導致滾動條出現。而放置相對(relative)定位對象在可視區域之外，滾動條不會出現。其實對于定位的主要問題是要記住每個定位的意義。相對定位是“相對于“元素在文檔流中初始位置的，而絕對定位是”相對于“最近的已經定位的祖先元素。

以下是補充：

雖然有知道css的絕對定位（absolute）、相對定位（relative），但卻從未自己動手寫過相關的效果！
忙活了一大半天，也算是完成了！也把這兩個屬性搞明白了一些！

總結如下：

先看下面這一個層結構

 


 


 此層只應用position：relative;樣式 
 

 此層只應用position：absolute;樣式 
 

 不應用樣式

1、absolute：不占位、relative：有占位！

如上層結構:

id為rel的層在顯示時，會占用一行！其后面的abs層只會在下一行顯示出來！
id為abs的層在顯示時，會與后面id為sss的重疊在一起！

2、默認情況下（不結合top等來定位），absolute（絕對定位）以父層來定位的
如上面的id為abs的層，如果不結合top等來定位，則其顯示位置會隨父級posi層（posi在文檔左下角，其也會在左下角）

3、在結合top、bottom、right、left等屬性時，absolute（絕對定位）以窗口做為定位，relative以自身的占位為基線做偏移！如下：

 


 


 不應用樣式 
 

 此層應用position：relative;bottom：30px;樣式 
 

 此層只應用position：absolute;bottom：30px;樣式 
 


 


以上代碼：

id為rel的層會上移并與id為sss的層重疊
id為abs的層會以窗口為基線，移至距離窗口30像素的位置！

4、在結合top、bottom、right、left等屬性時，如果想absolute（絕對定位）能以父層做為定位基線的話，則在父層應用absolute或relativ屬性就可以!如下：

 


 


 此層應用position：relative;bottom：30px;樣式 
 

 此層只應用position：absolute;bottom：30px;樣式

以上代碼：id為posi的層，也可以用absolute屬性！
id為rel的層，不受影響，以自身的占位為基線做偏移！

id為abs的層是以id為posi層的底邊做為定位基線，如果此時posi層的高度小于30px的話，abs層可能沒辦法看到哦！

轉自：http://www.rccoder.net/webpre/940.html

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/110948.html

相關文章

  • 詳解 CSS 屬性 - position

    摘要：屬性定義了一個元素在頁面布局中的位置以及對周圍元素的影響。元素將會脫離正常的文檔流，所以其周圍的元素將會忽略它的存在。此時，我們可以使用等屬性對元素進行絕對定位。一般情況下定義兩個屬性，或或。 postion 屬性定義了一個元素在頁面布局中的位置以及對周圍元素的影響。該屬性共有5個值： position: absolute position: relative position...

    joywek 評論0 收藏0

  • 詳解 CSS 屬性 - position

    摘要：屬性定義了一個元素在頁面布局中的位置以及對周圍元素的影響。元素將會脫離正常的文檔流，所以其周圍的元素將會忽略它的存在。此時，我們可以使用等屬性對元素進行絕對定位。一般情況下定義兩個屬性，或或。 postion 屬性定義了一個元素在頁面布局中的位置以及對周圍元素的影響。該屬性共有5個值： position: absolute position: relative position...

    CastlePeaK 評論0 收藏0

  • 帶你走進CSS定位詳解

    摘要：相對于其最近的一個定位設置的父對象進行絕對定位，可用。代碼基本語法默認值，無特殊定位。代碼相對定位相對定位生成相對定位的元素，相對于其它位置進行定位。結語結語帶你走進定位詳解，多試試，熟能生巧嘛 學習CSS相關知識，定位是其中的重點，也是難點之一，如果不了解css定位有時候都不知道怎么用，下面整理了一下關于定位屬性的具體理解和應用方案。 一：定位 定位屬性列表 position top...

    googollee 評論0 收藏0

  • CSS之position詳解

    摘要：元素的位置通過以及屬性進行規定。生成相對定位的元素，相對于其正常位置進行定位。規定應該從父元素繼承屬性的值。表示相對原先位置右邊進行偏移，表示相對原先位置下邊進行偏移。當和同時存在，僅有效，當和同時存在僅有效。 定義和用法 position屬性規定元素的定位類型。這個屬性定義建立元素布局所用的定位機制。任何元素都可以定位，不過絕對或固定元素會生成一個塊級框，而不論該元素本身是什么類型。...

    PiscesYE 評論0 收藏0

  • [CSS]CSS Position 詳解

    摘要：三生成固定定位的元素，相對于瀏覽器窗口定位，即瀏覽器窗口滾動也不會影響元素位置，元素的位置與文檔流無關，因此不占據空間，可能會和其他元素發生重疊。，元素脫離文檔流，相對于以外的第一個父元素定位。 一. CSS position 屬性介紹 CSS中position屬性指定一個元素（靜態的，相對的，絕對或固定）的定位方法的類型。有static，relative，absolute和fixed...

    xiguadada 評論0 收藏0

發表評論

0條評論

h9911

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<