position屬性設定,能夠實現橫向多列布局及較為複雜的定位,比如帶有遮罩層效果的提示框、固定層效果、全屏廣告等。
position擁有3種定位形式:1、靜態定位;2、相對定位;3、絕對定位。
position可以設定4個屬性值:1、static(靜態定位) 2、relative(相對定位) 3、absolute(絕對定位,屬於絕對定位) 4、fixed(固定定位,屬於絕對定位)
相對定位的特點
1、相對於自身原有位置進行偏移
2、仍處於標準文件流中(佔位)
3、隨即擁有偏移屬性和z-index屬性
當元素設定為絕對定位後,元素也會 多出兩類屬性:偏移量屬性 和 z-index屬性
不同的是:
1.該元素已經脫離了標準文件流(不佔位)
2.建立的定位基準不是該元素的原來位置,而是分兩種情況
2.1:沒有設定偏移量:無論是否存在已定位的祖先元素,都保持在元素初始位置,脫離文件流,寬度塌陷(隨內容變化而變化)
2.2:設定了偏移量:又分兩種情況(a.無已定位的祖先元素 b.有已定位的祖先元素)
a.無已定位的祖先元素:它會以根節點()為偏移參照基準
b.有已定位的祖先元素:它會以距其最近的已定位祖先元素為偏移參照基準
理解絕對定位和相對定位布局
p 22,null,left 概要 本文主要描述xhtml中相對定位和絕對定位各自的本質 用法 區別和兩者之間的關係。以及使用css的left right top bottom屬性 偏移屬性 和margin屬性 外邊距 對定位塊級元素進行布局的方法。p 22,null,left 說明 佔位空間 元素...
流式布局 浮動布局及絕對定位布局
知識點 1.掌握三大布局技巧 流式布局 浮動布局及絕對定位布局 2.精通標準文件流 盒子模型 float屬性以及position屬性等知識。w3c由全球資訊網聯盟制定的一系列標準 1.結構化標準語言 html和xml 2.表現標準語言 css 3.行為標準語言 dom和ecmascript css三...
div布局 相對定位 絕對定位 固定定位
當用div布局,相對定位時 乙個div包含另乙個div 子div的位置是相對於母div來設定的 從母div左上角開始算 margin可以活動到母div外圍而不會把母div撐大,padding則總是在母div內部折騰,會把母div撐大。當用div布局,絕對定位時,div位置是相對整個頁面來設定的 從整...