相對(duì)定位與絕對(duì)定位的分析測(cè)試

    相對(duì)定位與絕對(duì)定位在我們制作網(wǎng)頁(yè)的過(guò)程中應(yīng)用很頻繁。但對(duì)于其具體作用的深度分析我們也是一知半解，只管怎么用，不管為什么這么用。這次，作為前端萌新的我，對(duì)二者進(jìn)行了如下分析與測(cè)試，如有錯(cuò)誤，歡迎指導(dǎo)討教。

相對(duì)定位與絕對(duì)定位在被定位時(shí)。相對(duì)定位是相對(duì)于自身定位的，且在文本流中保留其原本的位置。而絕對(duì)定位是相對(duì)于父級(jí)定位的，但前提是父級(jí)也必須定位，如果父級(jí)沒(méi)有定位，那么子級(jí)就會(huì)尋找祖父級(jí)（即父級(jí)的父級(jí)）定位，如果祖父也沒(méi)有定位，那就尋找祖父的父級(jí)，如果祖父的父級(jí)都沒(méi)有定位，那就尋找body進(jìn)行定位。簡(jiǎn)單說(shuō)，絕對(duì)定位采用就近原則來(lái)定位，相對(duì)定位選擇自身原本所在位置定位。
說(shuō)了這么多，如果還不明白，那咋們舉個(gè)例子：
沒(méi)定位之前：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.one {
background-color: red;
width: 200px;
height: 200px;
}
.two {
background-color: blue;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div class="one"></div>
<div class="two"></div>
</body>
</html>

相對(duì)定位之后：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.one {
background-color: red;
width: 200px;
height: 200px;
position: relative;
}
.two {
background-color: blue;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div class="one"></div>
<div class="two"></div>
</body>
</html>

絕對(duì)定位：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.one {
background-color: red;
width: 200px;
height: 200px;
position: absolute;
}
.two {
background-color: blue;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div class="one"></div>
<div class="two"></div>
</body>
</html>

我們發(fā)現(xiàn)相對(duì)定位之后和沒(méi)定位之前沒(méi)區(qū)別，但在絕對(duì)定位之后藍(lán)塊跑到了紅塊的下邊。這是怎么回事呢？
因?yàn)椋诩t塊相對(duì)定位之后，紅塊保留了它在文本流的位置，雖然浮動(dòng)起來(lái)了，但仍然占著位置，盡管藍(lán)塊看上去好像并沒(méi)有什么變化。
但在紅塊相對(duì)定位之后，變化很明顯……藍(lán)塊跑到了紅塊的下邊。因?yàn)榧t塊被相對(duì)定位，原本保留在文本流的位置被刪除，本身浮了起來(lái)，所以藍(lán)塊就跑到了紅塊的下方，很明顯，在沒(méi)有父級(jí)的情況下，紅塊尋找body，相對(duì)于body定位了。
同理，如果我們給藍(lán)塊絕對(duì)定位，然后在它后方緊跟一個(gè)紅塊呢？
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.one {
background-color: red;
width: 200px;
height: 200px;
}
.two {
background-color: blue;
width: 100px;
height: 100px;
position: absolute;
}
</style>
</head>
<body>
<div class="one"></div>
<div class="two"></div>
<div class="one"></div>
</body>
</html>

。我們會(huì)發(fā)現(xiàn)，下方的紅塊跑到了藍(lán)塊的下方。因?yàn)樗{(lán)塊被相對(duì)定位了，它的位置被刪除，紅塊自然就會(huì)跑到藍(lán)塊的下方。
專(zhuān)注于為中小企業(yè)提供成都網(wǎng)站設(shè)計(jì)、成都網(wǎng)站制作服務(wù),電腦端+手機(jī)端+微信端的三站合一,更高效的管理,為中小企業(yè)土默特左旗免費(fèi)做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動(dòng)了上千家企業(yè)的穩(wěn)健成長(zhǎng)，幫助中小企業(yè)通過(guò)網(wǎng)站建設(shè)實(shí)現(xiàn)規(guī)模擴(kuò)充和轉(zhuǎn)變。
如果在樣式嵌套的時(shí)候相對(duì)定位又會(huì)有什么變化呢？
首先，我們給父級(jí)默認(rèn)瀏覽器，給子級(jí)分別絕對(duì)和相對(duì)定位。（代碼太過(guò)冗余，直接上效果圖藍(lán)塊為子級(jí) 紅塊為父級(jí)）
父級(jí)不定位子級(jí)絕對(duì)定位：

父級(jí)不定位子級(jí)相對(duì)定位：

父級(jí)絕對(duì) 子級(jí)不定位：
父級(jí)相對(duì) 子級(jí)不定位：

由圖很明顯，圖并沒(méi)有發(fā)生任何改變。這是為什么？記住一點(diǎn)，子級(jí)永遠(yuǎn)懸浮在父級(jí)之上，哪怕世界末日來(lái)臨。當(dāng)父級(jí)不定位時(shí)，自己無(wú)論怎么定位它都懸浮在父級(jí)之上。當(dāng)我們利用上下左右（tblr）來(lái)移動(dòng)時(shí)就可看出來(lái)了。藍(lán)塊在絕對(duì)定位時(shí)，是相對(duì)于瀏覽器邊框移動(dòng)的，因?yàn)楦讣?jí)沒(méi)有定位，所以它只能找body來(lái)定位。當(dāng)它相對(duì)定位時(shí)，它是相當(dāng)于自身移動(dòng)的，我們有時(shí)候會(huì)產(chǎn)生錯(cuò)覺(jué)，它是以瀏覽器左上角定位的，事實(shí)是錯(cuò)的，它是相對(duì)與自身定位的。
當(dāng)子級(jí)不定位，父級(jí)絕對(duì)或相對(duì)定位時(shí)。這時(shí)，我們可以把父級(jí)和自己看成一個(gè)整塊，父級(jí)怎么定位和子級(jí)沒(méi)有半毛錢(qián)關(guān)系，它始終浮在紅塊上邊。還是要記住一點(diǎn)，子級(jí)永遠(yuǎn)浮在父級(jí)之上（這是重點(diǎn)），要想讓自己浮在父級(jí)下邊，那就給子級(jí)設(shè)置z-index元素，父級(jí)不用設(shè)置。
同理，當(dāng)父級(jí)絕對(duì)定位，子級(jí)相對(duì)或絕對(duì)定位時(shí)。父級(jí)相對(duì)，子級(jí)相對(duì)或絕對(duì)定位時(shí)。這就很好理解了。
我們可以把他們看作兩個(gè)層，一個(gè)層叫‘父級(jí) ’，一個(gè)層叫‘子級(jí)’，父級(jí)始終包裹著子級(jí)（自己始終在父級(jí)之上）。父級(jí)不定位子級(jí)定位就相當(dāng)于父親放開(kāi)懷抱，讓子級(jí)可以自己玩（即子級(jí)可以在瀏覽器的任何位置移動(dòng)）定位方式就是參照目標(biāo)（也就是它想找誰(shuí)玩，相對(duì)就是自己跟自己玩，絕對(duì)就是找爺爺或者祖爺爺或者body玩）。父親定位，就是寓意父親把家里的大門(mén)關(guān)上了，里面只有父親和孩子，孩子要么和自己玩（子級(jí)相對(duì)定位），要么和父親玩（子級(jí)絕對(duì)定位）。至于影響父親的定位方式，只能是父親的父親。
今天就說(shuō)到這里有什么錯(cuò)誤還請(qǐng)大家多多指教！歡迎探討！

網(wǎng)站題目：相對(duì)定位與絕對(duì)定位的分析測(cè)試
文章URL：http://muchs.cn/article42/gdshhc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站設(shè)計(jì)、標(biāo)簽優(yōu)化、網(wǎng)站收錄、云服務(wù)器、網(wǎng)站制作、外貿(mào)網(wǎng)站建設(shè)

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容