CSS 定位——絕對定位和相對定位示例
當您想要設計複雜的布局時，您需要更改典型的文檔流程并覆蓋默認浏覽器樣式。您必須控制元素的行為方式和在頁面上的位置。例如，您可能希望以特定方式将元素彼此相鄰或堆疊在一起，或者将标題“粘”到頁面頂部并且在上下滾動頁面時不移動。要完成上述以及更多操作，您将使用 CSS 的屬性。此屬性有五個值可供選擇：，，，fixed，和。
在本文中，我們将重點關注和（也就是絕對定位和相對定位）。我們将概述它們的工作原理、它們之間的區别，以及它們如何最好地結合使用以獲得最大效果。讓我們開始吧！!
如何使用 開發者工具查看元素的位置
前端 Web 開發工作流程中的一個重要的工具是 的開發人員工具。您可以通過它查看任何網站的 HTML/CSS/ 代碼以了解不同樣式的工作原理。在macOS中，要查看某個元素在網頁上的位置，隻需在所需元素上同時按住并單擊。在 中，右鍵單擊要選擇的元素，然後會出現一個菜單，然後從那裡選擇檢查即可。
另一個簡單的方式是：按F12可以直接調出開發者工具。
開發人員工具将打開。
選擇選項卡，然後向下滾動到元素或在搜索框中鍵入。
HTML 元素在 CSS 中的默認定位是什麼？
默認情況下，CSS 中所有 HTLM 元素的屬性都設置為.這意味着，如果您不指定任何其他值或未明确聲明該屬性，它将是.
從視覺上看，所有元素都遵循 HTML 代碼的順序，這樣就創建了典型的文檔流。
根據 HMTL 代碼的順序，元素一個接一個地出現——直接在另一個下面。
塊元素像這樣一個接一個堆疊：
CSS Positioning
One
Two
Three
Four
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;
}
屬性未在上述代碼中聲明，因此恢複為默認值:。它遵循 HTML 代碼的順序。
HTML 中最先出現的内容首先顯示，每個元素緊随其後，創建如上所述的文檔流。
在我們這裡的代碼中，首先寫入帶有文本“One”的 div，因此它首先顯示在頁面上。在它的正下方，會顯示帶有文本“Two”的框，因為它也在 HTML 中緊随其後，依此類推。
這種默認定位不會為靈活性或移動元素留下任何空間。
如果您想将第一個方塊向頁面左側移動一點怎麼辦 - 您會怎麼做？
可以使用偏移屬性來執行這樣的操作，像top，，right和left。
但是，如果您在方塊已應用此默認靜态位置時嘗試應用它們，則這些屬性将不執行任何操作，方塊也不會移動。
也就是說，這些屬性對: 的方塊不起作用。
什麼是 CSS 中的相對位置？
:工作方式:與 類似，但它允許您更改元素的位置。
但是僅僅編寫這個 CSS 規則不會改變任何東西。
要修改的位置，你需要使用偏移屬性來執行這樣的操作，像top，，right和left。
在top，，right，和left偏移量推标簽遠從自行指定的地方，在反向實現效果。（比如top實際将元素下移了）
top實際上将元素移向元素父容器的底部。将元素推向元素的父容器的頂部，依此類推。
現在，您可以通過像這樣更新 CSS 來将第一個方塊向左移動：
.one {
background-color:powderblue;
position:relative;
right:50px;
}
在這裡，正方形已從默認情況下的位置像左側移動50px。
:;更改元素相對于父元素和相對于自身的位置，以及它通常在頁面的常規文檔流中的位置。這意味着它相對于它在父元素中的原始位置。
它根據标簽當前所在位置、相對于其通常位置和相對于其周圍标簽來移動标簽，而不影響其布局。
定位可以理解為元素在原本的地方“占了個坑”，然後自己跑到别的地方去了。偏移量就是自己與這個坑的偏移量。
使用這些偏移量 和:，您還可以更改元素在頁面上的顯示順序。
第二個方塊可以出現在第一個方塊的頂部：
.one {
background-color:powderblue;
position:relative;
top:150px;
}
.two {
background-color:royalblue;
position:relative;
bottom:120px;
}
從視覺上看，順序現在颠倒了，而 HTML 代碼保持完全相同。
回顧一下，相對定位的元素可以四處移動，同時仍保留在常規文檔流中。
它們也不影響周圍元素的布局。
CSS中的絕對位置是什麼？
如果您将第一個方塊的 CSS 規則更新為以下内容：
.one {
background-color:powderblue;
position:absolute;
}
你會得到這樣的結果：
這是意料之外的行為。第二個方格已經完全消失了。
如果您還添加了一些像這樣的偏移屬性：
.one {
background-color:powderblue;
position:absolute;
top: 50px;
left:0;
}
現在這個方格已經完全放棄了它的父級方框。
絕對定位的元素完全脫離了網頁的文檔流。
它們的定位不是基于它們在文檔流中的通常位置，而是基于它們祖先（有定位屬性）的位置。
在上面的示例中，絕對定位的正方形位于靜态定位的父級内。
這意味着它将相對于整個頁面本身定位，這意味着相對于元素 進行定位。
因此，坐标top:50px;和left:0;是基于整個頁面的。
絕對定位可以理解為元素離開了原本的地方（不占坑），其他元素會填補上來。而他的定位取決于最近的帶有定位屬性的祖先元素，如果所有的祖先元素都沒有定位屬性，則基于HTML元素定位（可以簡單的理解為基于浏覽器頁面進行定位）。
如果要将坐标應用于其父元素，則需要通過更新來相對定位父元素，.添加相對定位同時保持.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;
}
此代碼創建以下結果：
絕對定位将元素從常規文檔流中取出，同時也會影響頁面上其他元素的布局。
最新文章
-
“豫西中醫界之泰鬥喬保均”治療疑難病60年經驗賞析
23分鐘前 -
回憶、健忘和灑脫
45分鐘前 -
弘一法師：“真的不忍心告訴你，這個世界隻是一個夢。你一輩子執
58分鐘前 -
心理學，準的讓你驚叫
1小時前 -
人生，成大器者有四識，知識、見識、膽識、遠識
1小時前 -
俞和：被遺忘的書法家，以古為師，創新在手！
2小時前 -
2024屆新高考II卷語文真題答案及解析
2小時前 -
生前隻是小人物，死後震驚史學界
2小時前
熱門文章
-
每日一誦傷寒論第241條
1周前 -
老張老李侃門球之140篇
1天前 -
為什麼五點鐘要起床答案讓人吃驚！（現在知道還不晚）
1周前 -
這個穴位可以治療多種胃痛腹痛，還可以減肥
5天前 -
治療坐骨神經痛藥酒５方
1周前 -
二十四山開門放水作竈真訣開門放水作竈直訣——子山
1天前 -
門球技巧 隻需五個字讓你打好門球
1天前 -
美麗中國-2870：中國最大的内陸河，塔裡木河
1天前
有話要說...