css詳解position五種屬性用法及其含義

_Fatman發表於2021-04-12
CSS

position（定位）

position — 作為css屬性三巨頭（position、display、float）之一，它的作用是用來決定元素在文件中的定位方式。其屬性值有五種，分別是 — static（正常定位）、relative（相對定位）、absolute（絕對定位）、fixed（固定定位）、sticky（粘性定位）。

static（正常定位）

static(正常定位) 是元素position屬性的預設值，包含此屬性的元素遵循常規流[1]。

正常定位呈現常規流的示例html程式碼：

<!DOCTYPE html>
<html>
    <head>
        <meta name="charset" content="utf-8"/>
        <title>正常定位呈現常規流的示例</title>
        <style type="text/css">
            * {
                margin: 12px;
                background-color: white;
            }
            
            .block {
                background-color: #f00;
            }

            .inline {
                display: inline;
                background-color: #ff0;
            }
            
        </style>
    </head>
    <body>
        <div class="block">Fatman</div>
        <div class="block">Fatman</div>
        <div class="inline">Fatman</div>
        <div class="inline">Fatman</div>
        <div class="inline">Fatman</div>
        <div class="inline">Fatman</div>
    </body>
</html>

正常定位呈現常規流的示例效果圖：
在這裡插入圖片描述

當元素的position屬性值為static時，元素的top、right、bottom、left、z-index屬性都不會生效。

元素正常定位未新增top、right、bottom、left屬性的示例html程式碼：

<!DOCTYPE html>
<html>
    <head>
        <meta name="charset" content="utf-8"/>
        <title>元素正常定位未新增top、right、bottom、left屬性的示例</title>
        <style type="text/css">
            body {
                border: 1px solid black;
                padding: 12px;
            }
            
            div {
                width: 100px;
                height: 100px;
                background-color: #f00;
            }
        </style>
    </head>
    <body>
        <div></div>
    </body>
</html>

元素正常定位未新增top、right、bottom、left屬性的示例效果圖：
在這裡插入圖片描述

元素正常定位且新增top、right、bottom、left屬性的示例html程式碼：

<!DOCTYPE html>
<html>
    <head>
        <meta name="charset" content="utf-8"/>
        <title>元素正常定位且新增top、right、bottom、left屬性的示例</title>
        <style type="text/css">
            body {
                border: 1px solid black;
                padding: 12px;
            }
            
            div {
                top: 120px;
                right: 120px;
                bottom: 120px;
                left: 120px;
                width: 100px;
                height: 100px;
                background-color: #f00;
            }
        </style>
    </head>
    <body>
        <div></div>
    </body>
</html>

元素正常定位且新增top、right、bottom、left屬性的示例效果圖：

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片儲存下來直接上傳(img-lYSF5k4E-1618034530223)(./assest/img2.png)]
元素正常定位下，無論有無新增top、right、bottom、left屬性，紅色背景的div元素相對於body元素的邊框都沒有任何的位置變化，由此可以說明當元素的position屬性值為static時，元素的top、right、bottom、left屬性值不會生效。

正常定位的元素與相對定位的元素重疊的示例html程式碼：

<!DOCTYPE html>
<html>
    <head>
        <meta name="charset" content="utf-8"/>
        <title>正常定位的元素與相對定位的元素重疊的示例</title>
        <style type="text/css">
            body {
                border: 1px solid black;
                padding: 12px;
            }

            div {
                width: 100px;
                height: 100px;
            }

            #static {
                position: static;
                background-color: #f00;
                z-index: 999;
            }
            
            #relative {
                position: relative;
                top: -100px;
                left: 0;
                background-color: #ff0;
                z-index: 1;
            }
        </style>
    </head>
    <body>
        <div id="static"></div>
        <div id="relative"></div>
    </body>
</html>

正常定位的元素與相對定位的元素重疊的示例效果圖：

在這裡插入圖片描述

ID為static的元素的z-index屬性值明顯高於ID為relative的元素。同理，在z軸，ID為static的元素應該比ID為relative的元素更靠近使用者，事實上卻是ID為relative的元素更靠近使用者。

正常定位的元素與相對定位的元素重疊，但相對定位的元素的z-index值小於0時的示例html程式碼：

<!DOCTYPE html>
<html>
    <head>
        <meta name="charset" content="utf-8"/>
        <title>正常定位的元素與相對定位的元素重疊，但相對定位的元素的z-index值小於0時的示例</title>
        <style type="text/css">
            body {
                border: 1px solid black;
                padding: 12px;
            }

            div {
                width: 100px;
                height: 100px;
            }

            #static {
                position: static;
                background-color: #f00;
                z-index: 999;
            }
            
            #relative {
                position: relative;
                top: -100px;
                left: 0;
                background-color: #ff0;
                z-index: -1;
            }
        </style>
    </head>
    <body>
        <div id="static"></div>
        <div id="relative"></div>
    </body>
</html>

正常定位的元素與相對定位的元素重疊，但相對定位的元素的z-index值小於0時的示例效果圖：

在這裡插入圖片描述

將ID為relative的元素的z-index屬性值修改負數後，在z軸ID為static的元素比ID為relative的元素更靠近使用者,結合ID為relative的元素的z-index屬性值為正數的情況，得出position屬性值為static時，元素的z-index是不會受到設定值影響的[2]。

relative（相對定位）

postion屬性值為relative(相對定位) 的元素在不設定top、right、bottom、left這些屬性時，其自身在文件中的定位效果與static並無區別，但加上top、right、bottom、left這些屬性後，便會相對於自身在常規流中的位置進行定位。

在上文中闡述static時用到的ID為relative的元素用的就是相對定位，從其對應的效果圖可以看出，雖然元素中含有值為-100px的top屬性，將元素顯示的位置相對於自身在常規流中的位置往上移動了100畫素，但其自身在常規流中的位置仍然保留。

ID為relative的元素在常規流中的位置仍然保留的示例效果圖：
在這裡插入圖片描述

相對定位的示例html程式碼：

<!DOCTYPE html>
<html>
    <head>
        <meta name="charset" content="utf-8"/>
        <title>相對定位的示例</title>
        <style type="text/css">
            body {
                border: 1px solid black;
                padding: 12px;
            }

            div {
                width: 100px;
                height: 100px;
                position: relative;
            }

            #div1 {
                background-color: red;
            }

            #div2 {
                background-color: black;
                top: 100px;
                left: 100px;
            }

            #div3 {
                background-color: gray;
            }
        </style>
    </head>
    <body>
        <div id="div1"></div>
        <div id="div2"></div>
        <div id="div3"></div>
    </body>
</html>

相對定位的示例效果圖：

在這裡插入圖片描述

這裡三個元素盒子都是用的相對定位：紅色盒子因為沒有設定top、right、bottom、left屬性，其定位在自身在常規流中的位置；黑色盒子因為包含值均為100px的top和left兩屬性，所以其定位在相對於自身在常規流先靠下100畫素，再靠右100畫素的位置上；灰色盒子和紅色盒子一樣，沒有設定top、right、bottom、left屬性，但因黑色盒子在常規流中的位置仍然保留，所以灰色盒子所佔位置並沒有緊靠在紅色盒子的下方，而是出現在距離紅色盒子底部100畫素的位置上。

absolute（絕對定位）

absolute（絕對定位）與relative（相對定位）之間的區別是：relative（相對定位）並沒有脫離文件流，而absolute（絕對定位）脫離了文件流；relative（相對定位）相對於自身在常規流中的位置進行偏移定位，而absolute（絕對定位）相對於離自身最近的定位祖先元素的位置進行偏移定位。

先解釋何為脫離常規流，筆者將正常定位呈現常規流的示例html程式碼略作修改，得到：

絕對定位脫離常規流的示例html程式碼：

<!DOCTYPE html>
<html>
    <head>
        <meta name="charset" content="utf-8"/>
        <title>絕對定位脫離常規流的示例</title>
        <style type="text/css">
            * {
                margin: 12px;
                background-color: white;
            }
            
            .block {
                background-color: #f00;
            }

            .inline {
                display: inline;
                background-color: #ff0;
            }
            
        </style>
    </head>
    <body>
        <div class="block">Fatman</div>
        <div class="block" style="position: absolute;">Fatman</div>
        <div class="inline">Fatman</div>
        <div class="inline" style="position: absolute;">Fatman</div>
        <div class="inline">Fatman</div>
        <div class="inline">Fatman</div>
    </body>
</html>

絕對定位脫離常規流的示例效果圖：
在這裡插入圖片描述
從效果圖中可以看出，新增了position屬性值為absolute的塊級元素並沒有按預期獨佔一行，且同樣新增了position屬性值為absolute的行內元素也並沒有按預期在每行中按從左至右的順序依次排放元素。並且因為筆者沒有給兩個使用絕對定位的元素設定top、right、bottom、left屬性，所以佈局有種說不上來的詭異。

再說何為定位祖先元素：比如相對定位的元素中是相對於在常規流中的位置進行偏移定位，top、right、bottom、left屬性的參考系是元素在常規流中的位置，而在絕對定位的元素中的參考系就是定位祖先元素。擁有相對定位屬性值的祖先元素可以充當擁有絕對定位屬性值的子孫元素的定位祖先元素。如果子孫元素沒有定位祖先元素，會一直回溯到body元素，使用body元素充當自己的定位祖先元素。

相對定位元素充當絕對定位元素的定位祖先元素實現垂直水平居中的示例html程式碼：

<html>
    <head>
        <meta name="charset" content="utf-8"/>
        <title>相對定位元素充當絕對定位元素實現垂直水平居中的示例</title>
        <style type="text/css">
            body {
                border: 1px solid black;
                padding: 12px;
            }

            .parent {
                position: relative;
                width: 300px;
                height: 300px;
                background-color: #ff0;
            }

            .son {
                position: absolute;
                width: 100px;
                height: 100px;
                background-color: #f00;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
            }
        </style>
    </head>
    <body>
        <div class="parent">
            <div class="son"></div>
        </div>
    </body>
</html>

相對定位元素充當絕對定位元素的定位祖先元素實現垂直水平居中的示例效果圖：
在這裡插入圖片描述
紅色盒子（絕對定位元素）在其定位祖先元素黃色盒子（相對定位元素）中垂直水平居中。

body充當絕對定位元素的定位祖先元素實現垂直水平居中的示例html：

<html>
    <head>
        <meta name="charset" content="utf-8"/>
        <title>body充當絕對定位元素實現垂直水平居中的示例</title>
        <style type="text/css">
            body {
                border: 1px solid black;
                padding: 12px;
            }

            .center {
                position: absolute;
                width: 100px;
                height: 100px;
                background-color: #f00;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
            }
        </style>
    </head>
    <body>
        <div class="center"></div>
    </body>
</html>

body充當絕對定位元素的定位祖先元素實現垂直水平居中的示例效果圖：
在這裡插入圖片描述
紅色盒子（絕對定位元素）在其定位祖先元素body中垂直水平居中。

fixed（固定定位）

fixed（固定定位）和absolute（絕對定位）很像，但也有兩點不同：absolute（絕對定位）相對於定位祖先元素進行偏移定位，而fixed（固定定位）相對於視窗進行偏移定位；absolute（絕對定位）的定位祖先元素可以是相對定位的元素，而fixed（固定定位）的定位祖先元素只能是視窗。

固定定位實現垂直水平居中的示例html程式碼：

<html>
    <head>
        <meta name="charset" content="utf-8"/>
        <title>固定定位實現垂直水平居中的示例</title>
        <style type="text/css">
            body {
                border: 1px solid black;
                padding: 12px;
                height: 1000px;
            }

            .center {
                position: fixed;
                width: 100px;
                height: 100px;
                background-color: #f00;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
            }
        </style>
    </head>
    <body>
        <div class="center"></div>
    </body>
</html>

固定定位實現垂直水平居中的示例效果圖：
在這裡插入圖片描述
儘管上下滑動，卻不會影響到紅色盒子（固定定位元素）在視窗中垂直水平居中。

相對定位元素企圖充當固定定位元素的定位祖先元素實現垂直水平居中的示例html程式碼：

<html>
    <head>
        <meta name="charset" content="utf-8"/>
        <title>相對定位元素企圖充當固定定位元素的定位祖先元素實現垂直水平居中的示例</title>
        <style type="text/css">
            body {
                border: 1px solid black;
                padding: 12px;
            }

            .parent {
                position: relative;
                width: 300px;
                height: 300px;
                background-color: #ff0;
            }

            .son {
                position: fixed;
                width: 100px;
                height: 100px;
                background-color: #f00;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
            }
        </style>
    </head>
    <body>
        <div class="parent">
            <div class="son"></div>
        </div>
    </body>
</html>

相對定位元素企圖充當固定定位元素的定位祖先元素實現垂直水平居中的示例效果圖：

在這裡插入圖片描述
相對定位元素並不能作為固定定位元素的參照物。

sticky（粘性定位）

sticky（粘性定位）類似relative和fixed的結合，當元素設定position屬性為sticky時，如果top、right、bottom、left四個屬性都不設定具體值，sticky（粘性定位）不會生效，其表現效果與static一致[3]。
當在top、right、bottom、left四個屬性中至少設定一個具體值時，元素具備兩種狀態 — 類似relative（相對定位狀態）和類似fixed（固定定位狀態）。以top:10px為例 ：當元素相對於視窗頂部的距離大於10px時，元素處於類似relative（相對定位狀態），一旦元素相對於視窗頂部的距離小於或等於10px時，元素立馬切換到類似fixed（固定定位狀態）

粘性定位的示例html程式碼：

<!DOCTYPE html>
<html>
    <head>
        <meta name="charset" content="utf-8"/>
        <title>粘性定位的示例</title>
        <style type="text/css">
            body {
                border: 1px solid black;
                padding: 32px;
                margin: 32px;
                height: 1000px;
            }
            div {
                width: 100px;
                height: 100px;
                position: relative;
            }
            #div1 {
                background-color: red;
            }
            #div2 {
                background-color: black;
                position: sticky;
                top: 100px;
                left: 100px;
                padding: 0;
                margin: 0;
            }
            #div3 {
                background-color: gray;
            }
        </style>
    </head>
    <body>
        <div id="div1"></div>
        <div id="div2"></div>
        <div id="div3"></div>
    </body>
</html>

粘性定位的示例效果圖：
在這裡插入圖片描述
在上下滾動視窗時，設定了粘性定位的黑色盒子會隨著視窗一起滾動，直到觸發條件top:100px，便“粘住”在距離視窗頂部100畫素的位置上。

不過這裡有兩點需要注意：
1.當粘性定位的元素處於類似relative（相對定位狀態）時，它並不是單純的相對於自身在常規流中的位置進行的偏移定位；
2.當粘性定位的元素處於類似fixed（固定定位狀態）時，它在常規流中的位置仍然保留。

關於第一點，當粘性定位的示例中黑色盒子的left屬性值小於等於65畫素（32px + 32px + 1px）時，黑色盒子都位於其在常規流的位置上，而當粘性定位的示例中黑色盒子的left屬性值大於65畫素（32px + 32px + 1px）時,黑色盒子將相對於其在常規流的位置的（left設定值減去65畫素）進行定位。
關於第二點，當黑色盒子“粘住”時，紅色盒子與灰色盒子之間的間隙並沒有消除，由此得出黑色盒子在常規流中的位置仍然保留。

尾言

筆者才疏學淺，如有錯誤之處，還望不吝賜教。

  1. 將窗體自上而下分成一行一行，塊級元素獨佔一行、 行內元素在每行中按從左至右的順序依次排放元素，當超過父佈局最大寬度後自動換行。 ↩︎

  2. 筆者推測這時的z-index應該是固定值 — 0或1。 ↩︎

  3. 當相對定位的元素的top、right、bottom、left四個屬性都不設定具體值，其表現效果也與正常定位的元素一致。 ↩︎

相關文章