App下載

CSS 定位——絕對定位和相對定位示例

回憶的沙漏 2021-09-02 11:02:21 瀏覽數(shù) (5047)
反饋

當(dāng)您想要設(shè)計復(fù)雜的布局時,您需要更改典型的文檔流程并覆蓋默認(rèn)瀏覽器樣式。您必須控制元素的行為方式和在頁面上的位置。例如,您可能希望以特定方式將元素彼此相鄰或堆疊在一起,或者將標(biāo)題“粘”到頁面頂部并且在上下滾動頁面時不移動。要完成上述以及更多操作,您將使用 CSS 的position屬性。此屬性有五個值可供選擇:static,relative,absolute,fixed,和sticky。

在本文中,我們將重點(diǎn)關(guān)注relative和absolute(也就是絕對定位和相對定位)。我們將概述它們的工作原理、它們之間的區(qū)別,以及它們?nèi)绾巫詈玫亟Y(jié)合使用以獲得最大效果。讓我們開始吧!!

如何使用 Chrome 開發(fā)者工具查看元素的位置

前端 Web 開發(fā)工作流程中的一個重要的工具是 Chrome 的開發(fā)人員工具。您可以通過它查看任何網(wǎng)站的 HTML/CSS/JavaScript 代碼以了解不同樣式的工作原理。在macOS中,要查看某個元素在網(wǎng)頁上的位置,只需在所需元素上同時按住control并單擊。在 Window 中,右鍵單擊要選擇的元素,然后會出現(xiàn)一個菜單,然后從那里選擇檢查即可。

 另一個簡單的方式是:按F12可以直接調(diào)出開發(fā)者工具。

Chrome 開發(fā)人員工具將打開。

選擇Computed選項卡,然后向下滾動到position元素或在filter搜索框中鍵入position。

Screenshot-2021-08-29-at-3.13.33-PM

HTML 元素在 CSS 中的默認(rèn)定位是什么?

默認(rèn)情況下,CSS 中所有 HTLM 元素的position屬性都設(shè)置為static. 這意味著,如果您不指定任何其他position值或未position明確聲明該屬性,它將是static.

從視覺上看,所有元素都遵循 HTML 代碼的順序,這樣就創(chuàng)建了典型的文檔流。

根據(jù) HMTL 代碼的順序,元素一個接一個地出現(xiàn)——直接在另一個下面。

塊元素像這樣一個接一個堆疊:

<!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;
}

Screenshot-2021-08-30-at-2.00.39-PM

position屬性未在上述代碼中聲明,因此恢復(fù)為默認(rèn)值?position:static?。它遵循 HTML 代碼的順序。

HTML 中最先出現(xiàn)的內(nèi)容首先顯示,每個元素緊隨其后,創(chuàng)建如上所述的文檔流。

在我們這里的代碼中,首先寫入帶有文本“One”的 div,因此它首先顯示在頁面上。在它的正下方,會顯示帶有文本“Two”的框,因?yàn)樗苍?HTML 中緊隨其后,依此類推。

這種默認(rèn)定位不會為靈活性或移動元素留下任何空間。

如果您想將第一個方塊向頁面左側(cè)移動一點(diǎn)怎么辦 - 您會怎么做?

可以使用偏移屬性來執(zhí)行這樣的操作,像?top?,?bottom?,?right?和?left?。

但是,如果您在方塊已應(yīng)用此默認(rèn)靜態(tài)位置時嘗試應(yīng)用它們,則這些屬性將不執(zhí)行任何操作,方塊也不會移動。

也就是說,這些屬性對?position:static ?的方塊不起作用。

什么是 CSS 中的相對位置?

?position:relative?工作方式?position:static?與 類似,但它允許您更改元素的位置。

但是僅僅編寫這個 CSS 規(guī)則不會改變?nèi)魏螙|西。

要修改的位置,你需要使用偏移屬性來執(zhí)行這樣的操作,像?top?,?bottom?,?right?和?left?。

在top,bottom,right,和left偏移量推標(biāo)簽遠(yuǎn)從自行指定的地方,在反向?qū)崿F(xiàn)效果。(比如top實(shí)際將元素下移了)

top實(shí)際上將元素移向元素父容器的底部。bottom將元素推向元素的父容器的頂部,依此類推。

現(xiàn)在,您可以通過像這樣更新 CSS 來將第一個方塊向左移動:

.one {
    background-color:powderblue;
    position:relative;
    right:50px;
}

Screenshot-2021-08-30-at-2.14.15-PM

在這里,正方形已從默認(rèn)情況下的位置像左側(cè)移動50px。

?position:relative?;更改元素相對于父元素和相對于自身的位置,以及它通常在頁面的常規(guī)文檔流中的位置。這意味著它相對于它在父元素中的原始位置。

它根據(jù)標(biāo)簽當(dāng)前所在位置、相對于其通常位置和相對于其周圍標(biāo)簽來移動標(biāo)簽,而不影響其布局。

 relative定位可以理解為元素在原本的地方“占了個坑”,然后自己跑到別的地方去了。偏移量就是自己與這個坑的偏移量。

使用這些偏移量 和?position:relative?,您還可以更改元素在頁面上的顯示順序。

第二個方塊可以出現(xiàn)在第一個方塊的頂部:

.one {
    background-color:powderblue;
    position:relative;
    top:150px;
}

.two {
    background-color:royalblue;
    position:relative;
    bottom:120px;
}

Screenshot-2021-08-30-at-2.18.16-PM

從視覺上看,順序現(xiàn)在顛倒了,而 HTML 代碼保持完全相同。

回顧一下,相對定位的元素可以四處移動,同時仍保留在常規(guī)文檔流中。

它們也不影響周圍元素的布局。

CSS中的絕對位置是什么?

如果您將第一個方塊的 CSS 規(guī)則更新為以下內(nèi)容:

.one {
    background-color:powderblue;
    position:absolute;
}

你會得到這樣的結(jié)果:

Screenshot-2021-08-30-at-2.31.53-PM

這是意料之外的行為。第二個方格已經(jīng)完全消失了。

如果您還添加了一些像這樣的偏移屬性:

.one {
    background-color:powderblue;
    position:absolute;
    top: 50px;
    left:0;
}

Screenshot-2021-08-30-at-2.44.28-PM

現(xiàn)在這個方格已經(jīng)完全放棄了它的父級方框。

絕對定位的元素完全脫離了網(wǎng)頁的文檔流。

它們的定位不是基于它們在文檔流中的通常位置,而是基于它們祖先(有定位屬性)的位置。

在上面的示例中,絕對定位的正方形位于靜態(tài)定位的父級內(nèi)。

這意味著它將相對于整個頁面本身定位,這意味著相對于<html>元素 進(jìn)行定位。

因此,坐標(biāo)?top:50px;?和?left:0;?是基于整個頁面的。

 絕對定位可以理解為元素離開了原本的地方(不占坑),其他元素會填補(bǔ)上來。而他的定位取決于最近的帶有定位屬性的祖先元素,如果所有的祖先元素都沒有定位屬性,則基于HTML元素定位(可以簡單的理解為基于瀏覽器頁面進(jìn)行定位)。

如果要將坐標(biāo)應(yīng)用于其父元素,則需要通過更新來相對定位父元素,?.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)建以下結(jié)果:

Screenshot-2021-08-30-at-2.45.47-PM

絕對定位將元素從常規(guī)文檔流中取出,同時也會影響頁面上其他元素的布局。


0 人點(diǎn)贊