摘要：以上兩點(diǎn)點(diǎn)可以總結(jié)出，相對定位總是以父級左上角為原點(diǎn)進(jìn)行定位的，如果父級不存在，則以瀏覽器左上角進(jìn)行定位。

贊助我以寫出更好的文章，give me a cup of coffee?

2017最新最全前端面試題

1.如果設(shè)定TRBL，并且父級沒有設(shè)定position屬性，仍舊以父級的左上角為原點(diǎn)進(jìn)行定位(和absolute不同)

點(diǎn)擊下方result查看demo：
http://jsfiddle.net/trigkit/e...

案例代碼2

2. 如果設(shè)定TRBL，并且父級設(shè)定position屬性(無論是absolute還是relative)，則以父級的左上角為原點(diǎn)進(jìn)行定位，位置由TRBL決 定(前半段和absolute一樣)。如果父級有Padding屬性，那么就以內(nèi)容區(qū)域的左上角為原點(diǎn)，進(jìn)行定位(后半段和absolute不同)。

http://jsfiddle.net/trigkit/e...

以上兩點(diǎn)點(diǎn)可以總結(jié)出，相對定位總是以父級左上角為原點(diǎn)進(jìn)行定位的，如果父級不存在，則以瀏覽器左上角進(jìn)行定位。

1.使用相對定位的盒子，會相對于它原本的位置，通過偏移指定的距離，到達(dá)新的位置
2.使用相對定位的盒子仍在標(biāo)準(zhǔn)流中（會占據(jù)原來的位置），它對父親和兄弟盒子都沒有任何影響

案例代碼1

1.如果設(shè)定TRBL，并且父級沒有設(shè)定position屬性，那么當(dāng)前的absolute則以瀏覽器左上角為原始點(diǎn)進(jìn)行定位，位置將由TRBL決定。

http://jsfiddle.net/trigkit/e...

案例代碼2

2.如果設(shè)定TRBL，并且父級設(shè)定position屬性(無論是absolute還是relative)，則以父級的左上角為原點(diǎn)進(jìn)行定位，位置由TRBL決 定。即使父級有Padding屬性，對其也不起作用，說簡單點(diǎn)就是：它只堅(jiān)持一點(diǎn)，就以父級左上角為原點(diǎn)進(jìn)行定位，父級的padding對其根本沒有影 響。

點(diǎn)擊下方result 查看demo

http://jsfiddle.net/trigkit/e...

以上兩點(diǎn)可以總結(jié)出:

若想把一個定位屬性為absolute的元素定位于其父級元素內(nèi)

，必須滿足兩個條件：

設(shè) 定TRBL

父 級設(shè)定Position屬性

1.使用絕對定位的盒子以它的“最近”的一個“已經(jīng)定位”的“祖先元素”為基準(zhǔn)進(jìn)行定位。如果沒有已經(jīng)定位的祖先元素，那么會以瀏覽器窗口為基準(zhǔn)進(jìn)行定位

2.絕對定位的框從標(biāo)準(zhǔn)流中脫離，這意味著他們對其后的兄弟盒子的定位沒有影響，其他的盒子好像就好像這個盒子不存在一樣

（1）所謂“已經(jīng)定位”元素的含義是，position屬性被設(shè)置。

以上造成的細(xì)微偏差大家可以通過QQ截圖工具查看，到方框的應(yīng)該是100像素，到瀏覽器最邊緣的應(yīng)該是110像素。