css中position定位的四種方法總結(jié)

1. positon:static; 靜態(tài)定位（默認(rèn)的 ）

　　所有標(biāo)準(zhǔn)文檔流中的元素都是靜態(tài)定位

2. positon:relative; 相對(duì)定位

　　不脫離標(biāo)準(zhǔn)文檔流，“老家留坑，形影分離”

　　特點(diǎn)：如果設(shè)置了相對(duì)定位并且設(shè)置了top、left、right、bottom屬性，那么將來(lái)盒子會(huì)以盒子原來(lái)所在的位置進(jìn)行偏移

　　相對(duì)定位的用途：一般不用于做“壓蓋效果”，就兩個(gè)作用：

　　（1）微調(diào)元素

　　（2）絕對(duì)定位的參考，子絕父相

　　可以用left、right來(lái)描述盒子右、左的偏移；可以用top、bottom來(lái)描述盒子下、上的偏移

position：relative；
top：10px;
left：10px; //相對(duì)于原來(lái)位置向右下移10px

position：relative;
top:-10px;
left:-10px; //相對(duì)于原來(lái)位置向左上移10px

3. position:absolute; 絕對(duì)定位

　　脫離標(biāo)準(zhǔn)文檔流

　　特點(diǎn)：（1）如果這個(gè)元素沒(méi)有父元素，那么將來(lái)top、left、right、bottom是相對(duì)于瀏覽器窗口來(lái)定位的

　　　　　（2）如果絕對(duì)定位的元素有父元素，但父元素沒(méi)有相對(duì)定位，那么這個(gè)時(shí)候top、left、right、bottom還是相對(duì)于瀏覽窗口來(lái)定位的

　　　　　（3）如果絕對(duì)定位的元素有父元素，而且父元素有定位（非static），那么這個(gè)絕對(duì)定位的元素偏移是以自己的父元素為基礎(chǔ)

　　　　　（4）絕對(duì)定位之后的元素在頁(yè)面上不會(huì)占據(jù)位置

4. position:fixed; 固定定位

　　脫離標(biāo)準(zhǔn)文檔流

　　固定定位的用途：頁(yè)面中的某些小廣告，需要固定在頁(yè)面中的一個(gè)位置不變

總結(jié)：將來(lái)在寫(xiě)頁(yè)面的時(shí)候，用的最多的不是絕對(duì)定位也不是相對(duì)定位，而是絕對(duì)定位與相對(duì)定位一起使用

　　　規(guī)范：子絕父相（子元素使用絕對(duì)定位，父元素使用相對(duì)定位）

聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com