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

_Fatman發表於2021-04-12

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畫素）進行定位。
關於第二點，當黑色盒子“粘住”時，紅色盒子與灰色盒子之間的間隙並沒有消除，由此得出黑色盒子在常規流中的位置仍然保留。

尾言

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

將窗體自上而下分成一行一行，塊級元素獨佔一行、行內元素在每行中按從左至右的順序依次排放元素，當超過父佈局最大寬度後自動換行。 ↩︎
筆者推測這時的z-index應該是固定值 — 0或1。 ↩︎
當相對定位的元素的top、right、bottom、left四個屬性都不設定具體值，其表現效果也與正常定位的元素一致。 ↩︎

css詳解background八大屬性及其含義
2021-04-19
CSS
html中Position屬性值介紹和position屬性四種用法
2018-12-03
HTML
CSS中position屬性( absolute | relative | static | fixed )詳解
2019-02-22
CSS
CSS - 定位屬性position使用詳解（static、relative、fixed、absolute）
2018-08-16
CSS
CSS border-width屬性用法詳解
2017-03-02
CSS
Css 中的position屬性
2017-11-09
CSS
background屬性用法詳解
2017-02-18
UITableView 屬性用法詳解
2016-07-06
UIView
CSS定位屬性詳解
2019-03-03
CSS
css display屬性詳解
2015-11-09
CSS
CSS字型屬性和文字屬性詳解
2019-03-10
CSS
CSS之Position詳解
2016-10-08
CSS
CSS zoom屬性用法
2017-10-28
CSSOOM
CSS中Position、Float屬性深入探討
2016-02-27
CSS
Android屬性動畫詳解(一)，屬性動畫基本用法
2016-08-02
Android動畫
jQuery offset()和position()用法詳解
2017-11-01
jQuery
fill-opacity屬性用法詳解
2017-02-01
[轉載]CSS之Position詳解
2013-06-15
CSS
css transition屬性用法介紹
2017-03-15
CSS
css border-color屬性用法
2017-04-10
CSS
easyui tree自定義屬性用法
2014-04-30
UI
css3中transition屬性詳解
2022-01-14
CSSS3
CSS 自定義屬性指北
2022-05-10
CSS
命令注入-命令的連線符【‘&’‘&&’‘||’‘|’】的含義及其用法
2020-12-24
CSS3的content屬性詳解
2016-08-08
CSSS3
總結一下CSS中的定位 Position 屬性
2013-06-24
CSS
初識css自定義屬性
2018-11-13
CSS
CSS 自定義屬性（變數）
2018-04-16
CSS變數
CSS自定義屬性Expression(轉)
2007-08-15
CSSExpress
CSS background position 背景定位的用法
2018-01-24
CSS
【Android 動畫】動畫詳解之屬性動畫（五）
2019-02-26
Android動畫
css box-sizing屬性值詳解（MDN）
2019-08-07
CSS
安卓Property Animator動畫詳解（二）-自定義屬性
2019-03-04
安卓動畫
使用 CSS 自定義屬性（變數）
2022-08-08
CSS變數
全概率公式及其含義
2018-01-20
公式
Symbol 及其屬性
2019-05-04
Symbol
學習CSS的background屬性及其取值（實踐）
2020-10-21
CSS
display屬性詳解
2020-12-10

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

position（定位）

static（正常定位）

relative（相對定位）

absolute（絕對定位）

fixed（固定定位）

sticky（粘性定位）

尾言

相關文章