絕對定位與相對定位的區別

2021-06-18 12:36:22 字數 1368 閱讀 6770

相對定位是普通流定位,相對定位的元素出現在它在普通流該出現的位置,普通流你可理解為文件流就行了。這個佔空間的。

絕對定位它的位置和文件流無關且不佔空間。

關於position屬性

position

開放分類: html、css、web標準、網頁設計

bottom      right      top      z-index      left

position版本:css2  相容性:ie4+ ns4+ 繼承性:無

語法:position : static | absolute | fixed | relative

取值:static:預設值。無特殊定位,物件遵循html定位規則

absolute:將物件從文件流中拖出,使用 left , right , top , bottom 等屬性相對於其最接近的乙個最有定位設定的父物件進行絕對定位。如果不存在這樣的父物件,則依據 body 物件。而其層疊通過 z-index 屬性定義

fixed:未支援。物件定位遵從絕對(absolute)方式。但是要遵守一些規範

relative:物件不可層疊,但將依據 left , right , top , bottom 等屬性在正常文件流中偏移位置

說明:檢索物件的定位方式。

設定此屬性值為 absolute 會將物件拖離出正常的文件流絕對定位而不考慮它周圍內容的布局。假如其他具有不同 z-index 屬性的物件已經佔據了給定的位置,他們之間不會相互影響,而會在同一位置層疊。此時物件不具有外補丁( margin ),但仍有內補丁( padding )和邊框( border )。

要啟用物件的絕對(absolute)定位,必須指定 left , right , top , bottom 屬性中的至少乙個,並且設定此屬性值為 absolute 。否則上述屬性會使用他們的預設值 auto ,這將導致物件遵從正常的html布局規則,在前乙個物件之後立即被呈遞。

設定此屬性值為 relative 會保持物件在正常的html流中,但是它的位置可以根據它的前乙個物件進行偏移。在相對(relative)定位物件之後的文字或物件占有他們自己的空間而不會覆蓋被定位物件的自然空間。與此不同的,在絕對(absolute)定位物件之後的文字或物件在被定位物件被拖離正常文件流之前會占有它的自然空間。放置絕對(absolute)定位物件在可視區域之外會導致滾動條出現。而放置相對(relative)定位物件在可視區域之外,滾動條不會出現。

內容的尺寸會根據布局確定物件的尺寸。例如,設定乙個 div 物件的 height 和 position 屬性,則 div 物件的內容將決定它的寬度( width )。

此屬性對於 currentstyle 物件而言是唯讀的。對於其他物件而言是可讀寫的。

對應的指令碼特性為 position 。

示例:div

相對定位與絕對定位的區別

你對css相對定位和絕對定位區別是否了解,這裡和大家分享一下,css絕對定位使元素的位置與文件流無關,因此不佔據空間。這一點與css相對定位不同,css相對定位實際上被看作普通流定位模型的一部分,因為元素的位置相對於它在普通流中的位置。css相對定位 css相對定位是乙個非常容易掌握的概念。如果對乙...

絕對定位與相對定位

先看以下 效果 當設定child的div改為絕對定位後 效果 當父div沒設定絕對定位時,子絕對定位是相對於瀏覽器左上角座標,當時當父div設定了絕對或者相對定位後,效果如下 absolute 絕對定位 和 relative 相對定位 position absolute 意思是 絕對定位,他預設參照...

相對定位與絕對定位

其實是非常簡單的概念,w3school 給出的兩幅圖可以一目了然地表達這兩個概念 相對定位 position relative 也就是說,相對定位是相對於元素原來的位置進行重新定位,定位後,任然佔據著在文件流中原始的位置。絕對定位 position absolute 也就是說,絕對定位是相對於已定位...