絕對定位absolute精講

2021-08-22 18:13:29 字數 2165 閱讀 2509

一直沒搞清楚position:absolute relative fixed static 等值 下文是absolute的精講 

relative: 相對於自身原來的位置定位。

fixed: 和absolute差不多

一般預設position的值是static 

絕對定位基本特徵

絕對定位的第乙個特徵在於會從文件流中脫離,不受其他元素影響,定位是「絕對」的,所以稱之為絕對定位,如果是相對定位,會受其他元素影響,則定位是「相對」的;

未使用定位:即元素在正常文件流當中

.frame#div1#div2當我們給元素加上絕對定位的時候,元素會脫離當前文件流;

也就是說絕對定位的元素再文件流中沒有位置,它從文件流中脫離了出來,後面的元素會填充掉它原來的位置;

絕對定位的第二個特徵在於定位位置相對於第乙個具有定位屬性(即 position 為 relative 或者 absolute)的祖先元素;

當給絕對定位元素設定定位值時,該元素會延著dom樹向上查詢,直到找到乙個具有定位屬性的祖先元素,則定位相對於該元素,在該例子中,由於其祖先元素都沒有定位屬性,則該絕對定位元素會相對於body體進行定位;如果給其父元素加上乙個定位屬性,則該絕對定位元素會相對於這個父元素;

絕對定位高階特性 

絕對定位元素的第乙個高階特性就是其具有自動伸縮的功能,當我們將 width 設定為 auto 的時候(或者不設定,預設為 auto ),絕對定位元素會根據其 left 和 right 自動伸縮其大小(注意:請牢記絕對定位元素的定位值是相對於第乙個具有定位屬性的祖先元素);

根據第乙個高階特性,我們可以衍生出第二個高階特性,由於絕對行為元素具有自動伸縮的功能,如果 width 值為 auto 此時如果我們設定 left 和 right 都為0,則該元素會填充滿其相對的元素,如果此時我們將寬度設定為固定值,這是絕對定位元素會優先取 left 值作為定位標誌(這個標準適用於從左向右讀的文件流中,而在少數從右往左讀的文件流中,則優先取 right)。如果這時我們將 margin 設定為 auto ,則絕對定位元素會呈現居中狀態;

其實並不一定非要設定成0,在 margin: auto 下,只要 left 和 right 的值相等,且不超過其相對元素減去該絕對定位元素 width 的一半,就可以實現居中;如果其 left 超出了範圍,那麼會取 left 的值作為定位(從左向右的文件流);/* 至於在範圍能的值不等情況,大家可以自行測試一下 */

以上例子均在水平方向實現,那麼垂直方向是怎麼樣的呢?其實垂直方向的作用效果是一樣,垂直方向同樣可以自動拉伸,同理我們也可以實現垂直方向上的自動居中;

和水平居中有一點不同的是,無論 top 和 bottom 的值設定為多少,只要相等,就可以垂直居中。

絕對定位(absolute

絕對定位 absolute 作用是將被賦予此定位方法的物件從文件流中拖出,使用left,right,top,bottom等屬性相對於其最接近的乙個最有定位設定的父級物件進行絕對定位,如果物件的父級沒有設定定位屬性,即還是遵循html定位規則的,則依據 body 物件左上角作為參考進行定位。絕對定位物...

CSS中絕對定位 absolute

position absolute 絕對定位使元素的位置與文件流無關,因此不佔據空間。這一點與相對定位不同,相對定位實際上被看作普通流定位模型的一部分,因為元素的位置相對於它在普通流中的位置。絕對定位的元素的位置相對於最近的已定位祖先元素,如果元素沒有已定位的祖先元素,那麼它的位置相對於最初的包含塊...

絕對定位absolute和浮動定位float的異同

absolute 生成絕對定位的元素,相對於最近一級的定位不是 static 的父元素來進行定位。fixed 老ie不支援 生成絕對定位的元素,通常相對於瀏覽器視窗或 frame 進行定位。relative 生成相對定位的元素,相對於其在普通流中的位置進行定位。static 預設值。沒有定位,元素出...