Position屬性之relative用法_javascript技巧

position的默認值是static，（也就是說對于任意一個元素，如果沒有定義它的position屬性，那么它的position:static）

如果你想讓這個#demo里的一個div#sub相對于#demo定位在右上角的某個地方，應該給#demo相對定位，#sub絕對定位。

absolute是相對于自己最近的父元素來定位的，如果你不給#demo相對定位，那么#sub的絕對定位就是相對于body來定位的。

relative是相對于自己來定位的，例如：#demo{position:relative;top:-50px;},這時#demo會在相對于它原來的位置上移50px。

另：relative 不脫離文檔流，absolute 脫離文檔流。也就是說：relative 的元素盡管表面上看到它偏離了原來的位置，但它實際上在文檔流中還是沒變。absolute的元素不僅位置改變了，同時也脫離了文檔流。

position:relative日常應用的時候一般是設置給position:absolute;的父層的,父層position:relative; 子層position:absolute;的話, 就是依照父層的邊界進行定位的, 不然position:absolute 會逐層向上尋找設置了position:relative的元素邊界, 直到body元素..

寫了個例子如下：

Html代碼

static: 默認值。無特殊定位，對象遵循HTML定位規則

absolute: 將對象從文檔流中拖出,使用left,right,top,bottom 等屬性相對于其最接近的一個最有定位設置的父對象進行絕對定位。

如果不存在這樣的父對象,則依據body對象。而其層疊通過z-index屬性定義

fixed:未支持。對象定位遵從絕對(absolute)方式。但是要遵守一些規范

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

以上所述是小編給大家分享的position屬性之relative用法的全部敘述，希望大家喜歡。

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com