相對定位與絕對定位的分析測試

時間 2020-08-07

原文原文鏈接

相對定位與絕對定位在咱們製做網頁的過程當中應用很頻繁。但對於其具體做用的深度分析咱們也是隻知其一;不知其二，只管怎麼用，無論爲何這麼用。此次，做爲前端萌新的我，對兩者進行了以下分析與測試，若有錯誤，歡迎指導討教。

相對定位與絕對定位在被定位時。相對定位是相對於自身定位的，且在文本流中保留其本來的位置。而絕對定位是相對於父級定位的，但前提是父級也必須定位，若是父級沒有定位，那麼子級就會尋找祖父級（即父級的父級）定位，若是祖父也沒有定位，那就尋找祖父的父級，若是祖父的父級都沒有定位，那就尋找body進行定位。簡單說，絕對定位採用就近原則來定位，相對定位選擇自身本來所在位置定位。
說了這麼多，若是還不明白，那咋們舉個例子：
沒定位以前：
<!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>

相對定位以後：
<!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>

絕對定位：
<!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>

咱們發現相對定位以後和沒定位以前沒區別，但在絕對定位以後藍塊跑到了紅塊的下邊。這是怎麼回事呢？
由於，在紅塊相對定位以後，紅塊保留了它在文本流的位置，雖然浮動起來了，但仍然佔着位置，儘管藍塊看上去好像並無什麼變化。
但在紅塊相對定位以後，變化很明顯……藍塊跑到了紅塊的下邊。由於紅塊被相對定位，本來保留在文本流的位置被刪除，自己浮了起來，因此藍塊就跑到了紅塊的下方，很明顯，在沒有父級的狀況下，紅塊尋找body，相對於body定位了。
同理，若是咱們給藍塊絕對定位，而後在它後方緊跟一個紅塊呢？
<!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>

。咱們會發現，下方的紅塊跑到了藍塊的下方。由於藍塊被相對定位了，它的位置被刪除，紅塊天然就會跑到藍塊的下方。html
若是在樣式嵌套的時候相對定位又會有什麼變化呢？
首先，咱們給父級默認瀏覽器，給子級分別絕對和相對定位。（代碼太過冗餘，直接上效果圖藍塊爲子級紅塊爲父級）
父級不定位子級絕對定位：

父級不定位子級相對定位：

父級絕對子級不定位：
前端

父級相對子級不定位：

由圖很明顯，圖並無發生任何改變。這是爲何？記住一點，子級永遠懸浮在父級之上，哪怕世界末日來臨。當父級不定位時，本身不管怎麼定位它都懸浮在父級之上。當咱們利用上下左右（tblr）來移動時就可看出來了。藍塊在絕對定位時，是相對於瀏覽器邊框移動的，由於父級沒有定位，因此它只能找body來定位。當它相對定位時，它是至關於自身移動的，咱們有時候會產生錯覺，它是以瀏覽器左上角定位的，事實是錯的，它是相對與自身定位的。
當子級不定位，父級絕對或相對定位時。這時，咱們能夠把父級和本身當作一個整塊，父級怎麼定位和子級沒有半毛錢關係，它始終浮在紅塊上邊。仍是要記住一點，子級永遠浮在父級之上（這是重點），要想讓本身浮在父級下邊，那就給子級設置z-index元素，父級不用設置。
同理，當父級絕對定位，子級相對或絕對定位時。父級相對，子級相對或絕對定位時。這就很好理解了。
咱們能夠把他們看做兩個層，一個層叫‘父級 ’，一個層叫‘子級’，父級始終包裹着子級（本身始終在父級之上）。父級不定位子級定位就至關於父親放開懷抱，讓子級能夠本身玩（即子級能夠在瀏覽器的任何位置移動）定位方式就是參照目標（也就是它想找誰玩，相對就是本身跟本身玩，絕對就是找爺爺或者祖爺爺或者body玩）。父親定位，就是寓意父親把家裏的大門關上了，裏面只有父親和孩子，孩子要麼和本身玩（子級相對定位），要麼和父親玩（子級絕對定位）。至於影響父親的定位方式，只能是父親的父親。
今天就說到這裏有什麼錯誤還請你們多多指教！歡迎探討！瀏覽器

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。