詳解css相對(duì)定位和絕對(duì)定位

Jaden 發(fā)布于2019-08-28 17:57 / 2152人閱讀

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

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

2017最新最全前端面試題

案例代碼1

相對(duì)定位具有的屬性-1

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

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

案例代碼2

相對(duì)定位具有的屬性-2

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

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

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

相對(duì)定位的規(guī)律

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

絕對(duì)定位

案例代碼1

absolute具有的屬性-1

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

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

案例代碼2

absolute具有的屬性-2：

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

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

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

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

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

，必須滿足兩個(gè)條件：

設(shè) 定TRBL

父級(jí)設(shè)定Position屬性

絕對(duì)定位的規(guī)律

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

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

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

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