免費AI編程助手
當您想要設計復雜的布局時，您需要更改典型的文檔流程并覆蓋默認瀏覽器樣式。您必須控制元素的行為方式和在頁面上的位置。例如，您可能希望以特定方式將元素彼此相鄰或堆疊在一起，或者將標題“粘”到頁面頂部并且在上下滾動頁面時不移動。要完成上述以及更多操作，您將使用 CSS 的position屬性。此屬性有五個值可供選擇：static，relative，absolute，fixed，和sticky。
在本文中，我們將重點關注relative和absolute（也就是絕對定位和相對定位）。我們將概述它們的工作原理、它們之間的區(qū)別，以及它們如何最好地結合使用以獲得最大效果。讓我們開始吧！!
如何使用 Chrome 開發(fā)者工具查看元素的位置
前端 Web 開發(fā)工作流程中的一個重要的工具是 Chrome 的開發(fā)人員工具。您可以通過它查看任何網站的 HTML/CSS/JavaScript 代碼以了解不同樣式的工作原理。在macOS中，要查看某個元素在網頁上的位置，只需在所需元素上同時按住control并單擊。在 Window 中，右鍵單擊要選擇的元素，然后會出現一個菜單，然后從那里選擇檢查即可。
另一個簡單的方式是：按F12可以直接調出開發(fā)者工具。
Chrome 開發(fā)人員工具將打開。
選擇Computed選項卡，然后向下滾動到position元素或在filter搜索框中鍵入position。
HTML 元素在 CSS 中的默認定位是什么？
默認情況下，CSS 中所有 HTLM 元素的position屬性都設置為static. 這意味著，如果您不指定任何其他position值或未position明確聲明該屬性，它將是static.
從視覺上看，所有元素都遵循 HTML 代碼的順序，這樣就創(chuàng)建了典型的文檔流。
根據 HMTL 代碼的順序，元素一個接一個地出現——直接在另一個下面。
塊元素像這樣一個接一個堆疊：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css
">
<title>CSS Positioning</title>
</head>
<body>
<div class="parent">
<div class="child one">One</div>
<div class="child two">Two</div>
<div class="child three">Three</div>
<div class="child four">Four</div>
</div>
</body>
</html>
body {
margin:100px auto;
}
.parent {
width:500px;
border:1px solid red;
margin:auto;
text-align:center;
}
.child {
border-radius:10%;
width:100px;
height:100px;
margin:20px;
}
.one {
background-color:powderblue;
}
.two {
background-color:royalblue;
}
.three {
background-color: sienna;
}
.four {
background-color: slateblue;
}
position屬性未在上述代碼中聲明，因此恢復為默認值?position:static?。它遵循 HTML 代碼的順序。
HTML 中最先出現的內容首先顯示，每個元素緊隨其后，創(chuàng)建如上所述的文檔流。
在我們這里的代碼中，首先寫入帶有文本“One”的 div，因此它首先顯示在頁面上。在它的正下方，會顯示帶有文本“Two”的框，因為它也在 HTML 中緊隨其后，依此類推。
這種默認定位不會為靈活性或移動元素留下任何空間。
如果您想將第一個方塊向頁面左側移動一點怎么辦 - 您會怎么做？
可以使用偏移屬性來執(zhí)行這樣的操作，像?top?，?bottom?，?right?和?left?。
但是，如果您在方塊已應用此默認靜態(tài)位置時嘗試應用它們，則這些屬性將不執(zhí)行任何操作，方塊也不會移動。
也就是說，這些屬性對?position:static ?的方塊不起作用。
什么是 CSS 中的相對位置？
?position:relative?工作方式?position:static?與 類似，但它允許您更改元素的位置。
但是僅僅編寫這個 CSS 規(guī)則不會改變任何東西。
要修改的位置，你需要使用偏移屬性來執(zhí)行這樣的操作，像?top?，?bottom?，?right?和?left?。
在top，bottom，right，和left偏移量推標簽遠從自行指定的地方，在反向實現效果。（比如top實際將元素下移了）
top實際上將元素移向元素父容器的底部。bottom將元素推向元素的父容器的頂部，依此類推。
現在，您可以通過像這樣更新 CSS 來將第一個方塊向左移動：
.one {
background-color:powderblue;
position:relative;
right:50px;
}
在這里，正方形已從默認情況下的位置像左側移動50px。
?position:relative?;更改元素相對于父元素和相對于自身的位置，以及它通常在頁面的常規(guī)文檔流中的位置。這意味著它相對于它在父元素中的原始位置。
它根據標簽當前所在位置、相對于其通常位置和相對于其周圍標簽來移動標簽，而不影響其布局。
relative定位可以理解為元素在原本的地方“占了個坑”，然后自己跑到別的地方去了。偏移量就是自己與這個坑的偏移量。
使用這些偏移量 和?position:relative?，您還可以更改元素在頁面上的顯示順序。
第二個方塊可以出現在第一個方塊的頂部：
.one {
background-color:powderblue;
position:relative;
top:150px;
}
.two {
background-color:royalblue;
position:relative;
bottom:120px;
}
從視覺上看，順序現在顛倒了，而 HTML 代碼保持完全相同。
回顧一下，相對定位的元素可以四處移動，同時仍保留在常規(guī)文檔流中。
它們也不影響周圍元素的布局。
CSS中的絕對位置是什么？
如果您將第一個方塊的 CSS 規(guī)則更新為以下內容：
.one {
background-color:powderblue;
position:absolute;
}
你會得到這樣的結果：
這是意料之外的行為。第二個方格已經完全消失了。
如果您還添加了一些像這樣的偏移屬性：
.one {
background-color:powderblue;
position:absolute;
top: 50px;
left:0;
}
現在這個方格已經完全放棄了它的父級方框。
絕對定位的元素完全脫離了網頁的文檔流。
它們的定位不是基于它們在文檔流中的通常位置，而是基于它們祖先（有定位屬性）的位置。
在上面的示例中，絕對定位的正方形位于靜態(tài)定位的父級內。
這意味著它將相對于整個頁面本身定位，這意味著相對于<html>元素 進行定位。
因此，坐標?top:50px;?和?left:0;?是基于整個頁面的。
絕對定位可以理解為元素離開了原本的地方（不占坑），其他元素會填補上來。而他的定位取決于最近的帶有定位屬性的祖先元素，如果所有的祖先元素都沒有定位屬性，則基于HTML元素定位（可以簡單的理解為基于瀏覽器頁面進行定位）。
如果要將坐標應用于其父元素，則需要通過更新來相對定位父元素，?.parent?添加相對定位同時保持?.one?不變：
.parent {
width:500px;
border:1px solid red;
margin:auto;
text-align:center;
position:relative;
}
.one {
background-color:powderblue;
position:absolute;
top: 50px;
left:0;
}
此代碼創(chuàng)建以下結果：
絕對定位將元素從常規(guī)文檔流中取出，同時也會影響頁面上其他元素的布局。
