介紹position的幾種屬性
position屬性有以下幾種:
- 相對(duì)定位(relative)
- 絕對(duì)定位(absolute)
- 靜態(tài)定位(static)
- 固定定位(fixed)
1. 相對(duì)定位(relative)
相對(duì)定位是相對(duì)于原來(lái)自己以前在標(biāo)準(zhǔn)流中的位置來(lái)移動(dòng)。relative表現(xiàn)和static一樣,除非添加在一個(gè)相對(duì)定位
position:relative元素設(shè)置top\right\bottom\left屬性才會(huì)偏離正常位置。相對(duì)定位不脫離文檔流,會(huì)繼續(xù)在標(biāo)準(zhǔn)流中占有一份空間。
由于相對(duì)定位不脫離文檔流,所以在相對(duì)定位中是區(qū)分塊級(jí)元素和行內(nèi)元素的。
相對(duì)定位同一方向的定位熟悉只能有一個(gè)(垂直和水平方向).
使用
margin/padding等屬性會(huì)影響到標(biāo)準(zhǔn)流的布局。相對(duì)定位的應(yīng)用場(chǎng)景:用于對(duì)元素進(jìn)行微調(diào);配合絕對(duì)定位來(lái)使用。
2. 絕對(duì)定位(absolute)
絕對(duì)定位和固定定位相似,但是它不是相對(duì)于視窗,而是相對(duì)于最近的
position祖先元素。如果一個(gè)絕對(duì)定位的元素有定位流的祖先元素,并且祖先元素也是定位流(相對(duì)定位,絕對(duì)定位,固定定位),那么這個(gè)絕對(duì)定位的元素就會(huì)以定位流的那個(gè)祖先元素為參考點(diǎn)。
如果一個(gè)絕對(duì)定位的元素有祖先元素,并且祖先元素中有多個(gè)元素都是定位流,那么這個(gè)絕對(duì)定位的元素就會(huì)以離他最近的那個(gè)定位流的祖先元素為參考點(diǎn)。
如果絕對(duì)定位元素沒(méi)有定位流祖先元素,那么它是相對(duì)于文檔的body元素定位,并且會(huì)隨著頁(yè)面的滾動(dòng)而移動(dòng)。
注意的是一個(gè)
position元素指的是(絕對(duì)定位、相對(duì)定位、靜態(tài)定位),不包括固定定位。絕對(duì)定位的元素是脫離標(biāo)準(zhǔn)流的。
在企業(yè)開發(fā)中一般不單獨(dú)使用相對(duì)定位和絕對(duì)定位,而是結(jié)合一起使用。一般“子絕父相”,即子元素用絕對(duì)定位,父元素用相對(duì)定位。但凡說(shuō)到定位或一個(gè)盒子覆蓋在另一個(gè)盒子上都要想到“子絕父相”。
3. 靜態(tài)定位(static)
static是默認(rèn)值,表示不會(huì)被特殊定位。
4. 固定定位(fixed)
固定定位
position:fixed相對(duì)于視窗來(lái)定位,也就是說(shuō)元素不會(huì)隨著頁(yè)面滾動(dòng)而發(fā)生變化,元素還是停留在原來(lái)位置。可以使用
top\right\bottom\left屬性固定定位的元素是脫離標(biāo)準(zhǔn)流的,不會(huì)占用標(biāo)準(zhǔn)流的空間。