Position屬性之relative用法
Relative是position的一個屬性，是相對定位，通過本篇文章給大家介紹Position屬性之relative用法，對position屬性relative相關知識感興趣的朋友一起學習吧
Relative是position的一個屬性，是相對定位。
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 等屬性在正常文件流中偏移位置
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 |
|
以上所述是小編給大家分享的position屬性之relative用法的全部敘述，希望大家喜歡。