position的屬性值有哪些？分別有哪些作用？

position的屬性值有哪些？分別有哪些作用？

1.static：默認(rèn)值

靜態(tài)定位是元素的默認(rèn)定位方式，即無(wú)定位的意思，不脫離文檔流，top，right，bottom，left等屬性不生效，靜態(tài)定位在布局時(shí)我們幾乎不用。

2.相對(duì)定位：relative

參照物：元素本身偏移前位置

注：設(shè)置了相對(duì)定位，左右margin為auto仍然有效，原來(lái)在標(biāo)準(zhǔn)流的區(qū)域繼續(xù)占有，后面的盒子仍然以標(biāo)準(zhǔn)流的方式對(duì)待它。并且不會(huì)脫離文檔流。

3.絕對(duì)定位：absolute

絕對(duì)定位是元素以帶有定位的父級(jí)元素來(lái)移動(dòng)位置，要成為絕對(duì)定位元素的參照物必須滿足以下兩個(gè)條件：

·參照物和絕對(duì)定位元素必須是包含與被包含關(guān)系;

·該參照物必須具有定位屬性;

如果找不到滿足以上兩個(gè)條件的父包含塊，那么相對(duì)于瀏覽器窗口進(jìn)行定位

注：設(shè)置了position: absolute;屬性后，元素會(huì)脫離正常文檔流，不在占據(jù)空間;左右margin為auto將會(huì)失效;我們通過(guò)left、top、bottom、right來(lái)決定元素位置

4.固定定位：fixed

參照物：瀏覽器窗口;

注：固定定位會(huì)脫離文檔流;當(dāng)絕對(duì)定位和固定定位參照物都是瀏覽器窗口時(shí)的區(qū)別： 當(dāng)出現(xiàn)滾動(dòng)條時(shí)，固定定位的元素不會(huì)跟隨滾動(dòng)條滾動(dòng)，絕對(duì)定位會(huì)跟隨滾動(dòng)條滾動(dòng)。

猜你喜歡：

css定位詳解：css中定位類(lèi)型

什么是CSS浮動(dòng)?有什么作用？

如何用css畫(huà)圓?

CSS3如何設(shè)置顏色不透明度？

傳智教育HTML&JS+前端高手班