一.定位
- 定位的組成
定位 = 定位模式 + 邊偏移
定位: 將盒子定在某一個位置(定位就是擺盒子 按照定位方式移動盒子)
定位模式: 指一個元素在文檔中的定位方式
邊偏移: 決定該元素的最終位置
- 定位模式
定位模式?jīng)Q定元素的定位方式 通過 css 的 position 屬性設(shè)置
1). static 靜態(tài)定位
靜態(tài)定位是元素默認(rèn)定位方式 無定位的意思
語法:
選擇器 { position : static ; }
特點:
?. 靜態(tài)定位按照標(biāo)準(zhǔn)流特性擺放位置 它沒有邊偏移
?. 靜態(tài)定位布局不常用
2). relative 相對定位
相對定位是元素在移動位置時 相對于它原來的位置來說
語法:
選擇器 { position : relative ; }
特點:
?. 移動位置時參照自己原來的位置移動
?. 不脫標(biāo) 繼續(xù)保留原來的位置
3). absolute 絕對定位
絕對定位是相對于父級元素來移動
語法:
選擇器 { position : absolute ; }
特點:
?. 如果沒有父級元素或父元素沒有定位 則以瀏覽器為準(zhǔn)進(jìn)行定位
?. 如果父級元素有定位 (相對 絕對 固定) 則以最近一級且有定位的父級元素為參考點移動位置
?. 絕對定位不再占有原來的位置 (脫標(biāo))
4). fixed 固定定位
固定定位是元素固定于瀏覽器可視窗口的位置
使用場景: 瀏覽器頁面滾動時元素的位置不會改變
語法:
選擇器 { position : fixed ; }
特點:
?. 以瀏覽器的可視窗口為參照物移動
Ⅰ. 跟父級元素沒有任何關(guān)系
Ⅱ. 不隨滾動條滾動
?. 固定定位不占有原來的位置 (脫標(biāo))
- 邊偏移
邊偏移就是定位盒子移動到最終位置
有 top bottom left right 4個屬性
二. 定位拓展
- 子絕父相
含義: 子級元素是絕對定位的話 父級元素要用相對定位
注意:
?. 子級元素絕對定位 不會占有位置 可以放到父級元素里面任何一個地方 不會影響其他兄弟元素
?. 父級元素需要加相對定位限制子級元素在父級元素內(nèi)顯示
?. 父級元素布局時 需要占有位置 因此父級元素只能是相對定位
總結(jié):因為父級元素需要占有位置 因此是相對定位 子級元素不需要占有位置 則是絕對定位
- 固定定位小技巧
?. 固定在版心右側(cè)位置
思路:
Ⅰ. 讓固定定位的盒子 left : 50% 移動到瀏覽器可視窗口 (也可以看做版心) 的一半位置
Ⅱ. 讓固定定位盒子 margin - left : 版心寬度的一半 (多移動版心寬度的一半距離)
這樣就可以讓固定定位的盒子貼著版心右側(cè)對齊了
- 粘性定位 sticky
粘性定位是相對定位和固定定位的混合
語法:
選擇器 { position : sticky ; top : 10px ; }
特點:
?. 以瀏覽器的可視窗口為參照點移動元素 (固定定位特點)
?. 粘性定位占有原先的位置 (相對定位特點)
?. 必須添加 top bottom left right 其中的一個才有效
- 定位疊級次序 z - index
在使用定位布局時 如出現(xiàn)盒子重疊的情況 此時 可以使用 z - index 來控制盒子的前后次序 ( z 表示 z軸)
語法:
選擇器 { z - index : 1 ; }
特點:
?. 數(shù)值可以是正整數(shù) 負(fù)整數(shù)或0 默認(rèn)值是 auto 數(shù)值越大 盒子越靠上
?. 如果屬性相同 則按照書寫順序 后來居上
?. 數(shù)字后面不能加單位
?. 只有定位的盒子才有 z - index 屬性
- 絕對定位的盒子居中
添加了絕對定位的盒子不能使用 margin : 0 auto ; 水平居中
解決方法:
?. left : 50% (讓盒子向左側(cè)移動到父級元素的水平中心位置)
?. margin - left : 盒子寬度一半 (讓盒子向左移動自身寬度的一半)
垂直居中同理 將 left 改成 top 即可
三.定位特殊性
?. 行內(nèi)元素添加絕對或固定定位 可以直接設(shè)置寬高
?. 塊級元素添加絕對或固定定位 如不給寬高 則默認(rèn)大小為內(nèi)容大小
?. 脫標(biāo)盒子不會觸發(fā)外邊距塌陷
?. 絕對 (固定) 定位會壓住標(biāo)準(zhǔn)流的使用內(nèi)容
注意: 浮動元素不會壓住標(biāo)準(zhǔn)流的文字 只會壓住標(biāo)準(zhǔn)流盒子
