HTML中的定位

次我們來說一下，HTML網頁中的定位，有很多小伙伴一定好奇，為什么我們寫的代碼都是按順序羅列的而在網頁的展示效果中，我們的各種樣式，標簽，圖片等東西都是出現在網頁的各個位置，網頁看起來很美觀，各種盒模型擺放合理，這是因為在HTML中有定位的能力，今天我們就來學習一下。

position在英語中是位置的意思，而在我們CSS代碼中position也是跟位置有關的，position有三個屬性值分別為relative（相對定位：相對于自己原來的位置進行定位，但保留自己原來的位置，別的元素無法占用），absolute（絕對定位：相對于有定位的父級進行定位，如果沒有則相對于文檔進行定位，定位會脫離文檔，不保留原來的位置，會和原來的文檔不在一個層），fixed（位置定位：他的位置不會隨著滑輪的滾動而改變較常見于彈窗廣告，他也會脫離文檔流）。

我們說完了position，接下來我們就說說他是怎么進行定位的，我們有left，top，right，bottom，五個屬性分別對應距左邊，距上邊，距右邊，距下邊，大家注意到我在每個方向前都加了個距字，我們所做的定位是距各個方向的距離而不是移動，例：left:200px，是向右移動200像素，他的意思是距離左邊增加200像素。在我們實際的編程中一般都不常用bottom，我們知道，滑輪是可以一直往下滑的，所以我們相對于底部定位的話就很困難。

我們來通過代碼和結果來看一下：

沒有定位的樣式

加了relative

加了relative的結果

上面這個結果圖看著比例不太對是因為作者截圖沒截好[捂臉]

我們可以看出貓圖片并沒有移動，而是給兔子圖片留著位置。

加了absolute

加了absolute的結果

這個結果我們可以看出貓圖片向前移動了，并沒有保留兔子圖片原來的位置

加了fixed

代碼中的<br>是為了使滑輪可以滑動，以便更好的展示效果。

用了fixed的效果展示。

以上的代碼樣式只對兔子圖片起作用，我沒有給貓添加任何樣式，貓圖片只是作為參照物。

SS 有兩個最重要的基本屬性，前端開發必須掌握：display和position。

display屬性指定網頁的布局。兩個重要的布局，我已經介紹過了：彈性布局flex^[1]和網格布局grid^[2]。

本文介紹非常有用的position屬性。我希望通過10分鐘的閱讀，幫助大家輕松掌握網頁定位，說清楚瀏覽器如何計算網頁元素的位置，尤其是新引進的sticky定位。

本文由國內最大的在線教育平臺之一“騰訊課堂”^[3]贊助。他們現在啟動了“騰訊課堂101計劃”^[4]，推廣平臺上的課程資源，有不少優質內容。希望提高前端技術水平的同學，可以留意一下本文結尾的免費課程信息。

一、position 屬性的作用

position屬性用來指定一個元素在網頁上的位置，一共有5種定位方式，即position屬性主要有五個值。

?static?relative?fixed?absolute?sticky

下面就依次介紹這五個值。最后一個sticky是2017年瀏覽器才支持的，本文將重點介紹。

二、static 屬性值

static是position屬性的默認值。如果省略position屬性，瀏覽器就認為該元素是static定位。

這時，瀏覽器會按照源碼的順序，決定每個元素的位置，這稱為“正常的頁面流”（normal flow）。每個塊級元素占據自己的區塊（block），元素與元素之間不產生重疊，這個位置就是元素的默認位置。

注意，static定位所導致的元素位置，是瀏覽器自主決定的，所以這時top、bottom、left、right這四個屬性無效。

三、relative，absolute，fixed

relative、absolute、fixed這三個屬性值有一個共同點，都是相對于某個基點的定位，不同之處僅僅在于基點不同。所以，只要理解了它們的基點是什么，就很容易掌握這三個屬性值。

這三種定位都不會對其他元素的位置產生影響，因此元素之間可能產生重疊。

3.1 relative 屬性值

relative表示，相對于默認位置（即static時的位置）進行偏移，即定位基點是元素的默認位置。

它必須搭配top、bottom、left、right這四個屬性一起使用，用來指定偏移的方向和距離。

div { position: relative; top: 20px;}

上面代碼中，div元素從默認位置向下偏移20px（即距離頂部20px）。

3.2 absolute 屬性值

absolute表示，相對于上級元素（一般是父元素）進行偏移，即定位基點是父元素。

它有一個重要的限制條件：父元素不能是static定位，否則定位基點就會變成整個網頁的根元素html。另外，absolute定位也必須搭配top、bottom、left、right這四個屬性一起使用。

/* HTML 代碼如下 <div id="father"> <div id="son"></div> </div>*/
#father { positon: relative;}#son { position: absolute; top: 20px;}

上面代碼中，父元素是relative定位，子元素是absolute定位，所以子元素的定位基點是父元素，相對于父元素的頂部向下偏移20px。如果父元素是static定位，上例的子元素就是距離網頁的頂部向下偏移20px。

注意，absolute定位的元素會被“正常頁面流”忽略，即在“正常頁面流”中，該元素所占空間為零，周邊元素不受影響。

3.3 fixed 屬性值

fixed表示，相對于視口（viewport，瀏覽器窗口）進行偏移，即定位基點是瀏覽器窗口。這會導致元素的位置不隨頁面滾動而變化，好像固定在網頁上一樣。

它如果搭配top、bottom、left、right這四個屬性一起使用，表示元素的初始位置是基于視口計算的，否則初始位置就是元素的默認位置。

div { position: fixed; top: 0;}

上面代碼中，div元素始終在視口頂部，不隨網頁滾動而變化。

四、sticky 屬性值

sticky跟前面四個屬性值都不一樣，它會產生動態效果，很像relative和fixed的結合：一些時候是relative定位（定位基點是自身默認位置），另一些時候自動變成fixed定位（定位基點是視口）。

因此，它能夠形成“動態固定”的效果。比如，網頁的搜索工具欄，初始加載時在自己的默認位置（relative定位）。

頁面向下滾動時，工具欄變成固定位置，始終停留在頁面頭部（fixed定位）。

等到頁面重新向上滾動回到原位，工具欄也會回到默認位置。

sticky生效的前提是，必須搭配top、bottom、left、right這四個屬性一起使用，不能省略，否則等同于relative定位，不產生“動態固定”的效果。原因是這四個屬性用來定義“偏移距離”，瀏覽器把它當作sticky的生效門檻。

它的具體規則是，當頁面滾動，父元素開始脫離視口時（即部分不可見），只要與sticky元素的距離達到生效門檻，relative定位自動切換為fixed定位；等到父元素完全脫離視口時（即完全不可見），fixed定位自動切換回relative定位。

請看下面的示例代碼。（注意，除了已被淘汰的 IE 以外，其他瀏覽器目前都支持sticky。但是，Safari 瀏覽器需要加上瀏覽器前綴-webkit-。）

#toolbar { position: -webkit-sticky; /* safari 瀏覽器 */ position: sticky; /* 其他瀏覽器 */ top: 20px;}

上面代碼中，頁面向下滾動時，#toolbar的父元素開始脫離視口，一旦視口的頂部與#toolbar的距離小于20px（門檻值），#toolbar就自動變為fixed定位，保持與視口頂部20px的距離。頁面繼續向下滾動，父元素徹底離開視口（即整個父元素完全不可見），#toolbar恢復成relative定位。

五、 sticky 的應用

sticky定位可以實現一些很有用的效果。除了上面提到“動態固定”效果，這里再介紹兩個。

5.1 堆疊效果

堆疊效果（stacking）指的是頁面滾動時，下方的元素覆蓋上方的元素。下面是一個圖片堆疊的例子，下方的圖片會隨著頁面滾動，覆蓋上方的圖片（查看 demo^[5]）。

HTML 代碼就是幾張圖片。

<div><img src="pic1.jpg"></div><div><img src="pic2.jpg"></div><div><img src="pic3.jpg"></div>

CSS 代碼極其簡單，只要兩行。

div { position: sticky; top: 0;}

它的原理是頁面向下滾動時，每張圖片都會變成fixed定位，導致后一張圖片重疊在前一張圖片上面。詳細解釋可以看這里^[6]。

5.2 表格的表頭鎖定

大型表格滾動的時候，表頭始終固定，也可以用sticky實現（查看 demo^[7]）。

CSS 代碼也很簡單。

th { position: sticky; top: 0; }

需要注意的是，sticky必須設在<th>元素上面，不能設在<thead>和<tr>元素，因為這兩個元素沒有relative定位，也就無法產生sticky效果。詳細解釋可以看這里^[8]。

（正文完）

免費前端全棧課程

初學者剛接觸前端，往往會被一大堆技術名詞、框架和工具，搞得眼花繚亂。

到底哪些技術是目前的主流技術棧，既能用于公司的開發實務，又能為自己的簡歷增添亮點？

下面就是一套目前主流的前端技術棧。

（1）Node.js：服務器端的 JavaScript 運行環境，不管哪種前端開發，都必不可少的底層環境。

（2）Webpack：語法轉換工具，把 ES6/TypeScript/JSX 語法轉成瀏覽器可以運行的代碼。

（3）Koa2：一個非常流行、簡潔強大的 Node.js 后端的 Web 開發框架。

（4）MongoDB：目前應用最廣泛的非關系數據庫之一，功能豐富，用法較簡單。

（5）Vue 全家桶：

?Vue：前端基礎框架?Vuex：配套的前端狀態管理庫。?Vue Router：官方的路由插件，構建單頁面應用必不可少。?Vue CLI：腳手架工具，幫你快速上手 Vue 開發，無需再花多余時間去實現項目架構。?Vant：有贊前端團隊開發的輕量級移動端 Vue 組件庫，讓你快速使用已經封裝好的各種頁面組件。

看到這個名單，你是不是感到有點頭大，全部掌握它們需要多少時間啊？

現在，騰訊課堂就有一門這樣的課程，內容包含了所有這些工具，教你怎么用它們從頭完成一個全棧項目，親手做出一個手機端的移動商城，是由 慕課網的精英講師--謝成老師講授。

該課程的制作單位是青盟科技。它是《騰訊課堂101計劃》重點推廣的優質機構，已有7年 IT 行業教學經驗，培養收費學員2000+，有超過72%的學員都進入到名企大廠。如果你想了解課程的詳細內容，獲取課程大綱，或者想接受系統的前端培訓，可以登錄騰訊課堂查看“青盟科技”。

（完）

References

[1]彈性布局flex:http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

[2]網格布局grid:http://www.ruanyifeng.com/blog/2019/03/grid-layout-tutorial.html

[3]“騰訊課堂”:https://ke.qq.com/?utm=ruanyifeng

[4]“騰訊課堂101計劃”:https://edu.qq.com/a/20190119/005414.htm

[5]demo:https://jsbin.com/fegiqoquki/edit?html,css,output

[6]這里:https://dev.to/vinceumo/slide-stacking-effect-using-position-sticky-91f

[7]demo:https://jsbin.com/decemanohe/edit?html,css,output

[8]這里:https://css-tricks.com/position-sticky-and-table-headers/

什么需要定位?

浮動可以讓多個塊級盒子一行沒有縫隙排列顯示,多用于橫向排列盒子.
定位則可讓盒子自由地在某個盒子內移動或者固定屏幕某個位置,并且可以壓住其他盒子.

定位組成

定位:將盒子定在某一個位置

定位=定位模式+邊偏移

定位模式~>指定一個元素在文檔中的定位方式

div {
        /* 定位模式 值
        static~>靜態定位 (默認方式) 無定位
        relative~>相對定位 
        absolute~>絕對定位 
        fixed~>固定定位 */
        position: static;
    }

邊的偏移~>決定了該元素的最終位置

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            position: absolute;
            /* 偏移方向:偏移距離 上 下 左 右 */
            top: 100px;
            bottom: 100px;
            left: 100px;
            right: 100px;
            background-color: lightsteelblue;
        }
    </style>
</head>

<body>
    <div>盒子A</div>
</body>

</html>

相對定位 relative

相對定位是元素在移動位置的時候,相當于它原來的位置

特點:

移動位置的時候參照點是自己原來的位置
原來在標準流的位置繼續占有.后面盒子仍然以標準流的方式對于它

實踐效果:

代碼展示:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
        }
        .Lazy {
            position: relative;
            top: 100px;
            left: 100px;
            background-color: lightsteelblue;
        }
    </style>
</head>

<body>
    <div class="Lazy">懶羊羊</div>
    <div>喜羊羊</div>
</body>

</html>

絕對定位 absolute

絕對定位是元素在移動位置的時候,是相對于它祖先的元素來說的

特點:

如果沒有祖先元素/祖先元素沒有定位,則以瀏覽器為準定位(Document文檔)
絕對定位不再占有原先的位置
如果祖先的元素有定位(相對絕對固定),則以最近一級有定位祖先為參考點移動位置

實踐

1.祖先元素無定位以瀏覽器為基礎

效果展示:

代碼展示:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
         .Pleasant {
            float: right;
            width: 400px;
            height: 400px;
            background-color: pink;
        }

        .small-bell {
            position: absolute;
            width: 200px;
            height: 200px;
            top: 50px;
            left: 50px;
            background-color: lightsteelblue;
        }
    </style>
</head>

<body>
    <div class="Pleasant">
        喜羊羊 
        <div class="small-bell">鈴鐺</div>
    </div>

</body>

</html>

2.祖先有定位以上一級為基礎

效果展示

代碼展示

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .sheep {
          position: absolute;
          background-color: sandybrown;
          width: 600px;
          height: 600px;
        }
        .Pleasant {
            position: absolute;
            bottom: 50px;
            width: 400px;
            height: 400px;
            background-color: pink;
        }
        .small-bell {
            position: absolute;
            width: 200px;
            height: 200px;
            top: 50px;
            left: 50px;
            background-color: lightsteelblue;
        }
    </style>
</head>

<body>
    <div class="sheep">
        
        <div class="Pleasant">
            喜羊羊 
            <div class="small-bell">鈴鐺</div>
        </div>
    </div>

</body>

</html>

子絕父相

子級是絕對定位的話父級要用相對定位

使用原因:

子盒子絕對定位,不會占有位置,可以放到父盒子里面的任何一個地方,不影響其他兄弟盒子
父盒子需要加定位限制子盒子在父盒子內顯示
父盒子布局時,需要占有位置,因此父盒子只能相對定位

總結:父級需要占用位置,則選相對定位.子盒子不需要占位置,則選擇絕對定位

但是不是一成不變 按需求來開發靈活變動

實踐

使用效果

代碼展示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<style>
    .box {
        height: 240px;
        padding: 20px 5px;
        border: 1px solid coral;
    }
    .goods {
        position: relative;
        width: 200px;
        height: 200px;
    }
    .goods .hot {
       position: absolute;
       top: -7px;
       right: -10px;
       width: 25px;
    }
</style>
<body>
    <div class="box">
        <div class="goods">
            <img class="hot" src="img/hot.png" alt="">
            <img src="img/thing.png" alt="">
        </div>
    </div>
</body>
</html>

固定定位 fixed

固定定位是元素固定于瀏覽器可視區域的位置

特點

1.以瀏覽器的可視窗口為參照點移動元素(跟父元素沒有任何關系,不隨滾動條滾動)

2.固定定位不再占有原先的位置

大廠使用案例:

實踐

效果展示

代碼展示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>fixed</title>
</head>
<style>
    .core {
        width: 900px;
        height: 1300px;
        margin: 0 auto;
        background-color: #11659a;
    }
    /* 固定標簽的基本用法 */
    .navigation {
        position: fixed;
        width: 900px;
        height: 50px;
        background-color: darkgoldenrod;
    }
    /* 小技巧 固定在版心右側位置 */
    /* 
    1.讓固定定位的盒子left:50% 走到瀏覽器可視區的一半位置 
    2.讓固定定位的盒子margin-left:版心寬度的一半距離(如此案例 900px寬度 一半450px 為了存在縫隙 可多些距離) 多走版心寬度的一半位置
    就實現讓固定定位的盒子貼著版心右側對齊了
    */
    .tag {
       width: 50px;
       height: 50px;
       background-color: #12a182;
       position: fixed;
       top: 100px;
       left: 50%;
       margin-left: 455px;
    }
</style>
<body>
    <div class="core">
        <div class="navigation"></div>
        <div class="tag">TAG</div>
    </div>
</body>
</html>

?粘性定位 sticky

粘性定位可以被認為是相對定位和固定定位的混合

特點

以瀏覽器的可視窗口為參照點移動元素
占有原先的位置(相對定位的特點)
必須添加top left right bottom 其中一個才有效
跟頁面滾動搭配使用

大廠使用案例:

實踐

使用效果:

代碼展示:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>fixed</title>
</head>
<style>
    .core {
        width: 900px;
        height: 1300px;
        margin: 0 auto;
        background-color: #11659a;
    }

    /* 固定標簽的基本用法 */
    .navigation {
        position: sticky;
        /* 必須存在一個偏移量 */
        top: 0;
        width: 900px;
        height: 50px;
        background-color: darkgoldenrod;
    }
</style>

<body>
    <div class="core">
        <div class="navigation"></div>
        <span>河邊蘆葦密又繁，秋深露水結成霜。意中之人在何處？就在河水那一方。</span>
        <br>
        <span> 逆著流水去找她，道路險阻又太長。順著流水去找她，仿佛在那水中央。</span>
        <br>
        <span>河邊蘆葦密又繁，清晨露水未曾干。意中之人在何處？就在河岸那一邊。</span>
        <br>
        <span>逆著流水去找她，道路險阻攀登難。順著流水去找她，仿佛就在水中灘。</span>
        <br>
        <span>河邊蘆葦密稠稠，早晨露水未全收。意中之人在何處？就在水邊那一頭。</span>
        <br>
        <span>逆著流水去找她，道路險阻曲難求。順著流水去找她，仿佛就在水中洲。</span>
    </div>
</body>

</html>

定位小總結?

定位模式	是否脫標	移動位置
static(默認)	否	不能使用邊偏移
relative	否(占有位置)	相對于自身位置移動
absolute	是(不占有位置)	帶有定位的父級
fixed	是(不占有位置)	瀏覽器可視區
sticky	否(占有位置)	瀏覽器可視區

定位疊放次序 z-index

在使用定位布局時,可能會出現盒子重疊的情況.

可以使用z-index來控制盒子的前后次序 z軸

數值可為正/負/0(無單位) 默認auto,數值越大,盒子越靠上
如果屬性值相同,則按照書寫順序,后來居上
只有定位盒子才有z-index屬性

實踐

效果展示

代碼展示

無z-index時

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<style>
    div {
        position: absolute;
        width: 300px;
        height: 300px;
    }

    div:nth-child(1) {
        background-color: lightblue;
        top: 50px;
        left: 50px;
    }

    div:nth-child(2) {
        background-color: lightpink;
        top: 100px;
        left: 100px;
    }

    div:nth-child(3) {
        background-color: lightyellow;
        top: 150px;
        left: 150px;
    }
</style>

<body>
    <div>光頭強</div>
    <div>熊大</div>
    <div>熊二</div>
</body>

</html>

有z-index時

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<style>
    div {
        position: absolute;
        width: 300px;
        height: 300px;
    }

    div:nth-child(1) {
        background-color: lightblue;
        top: 50px;
        left: 50px;
        /* 層級排上 */
        z-index: 1;
    }

    div:nth-child(2) {
        background-color: lightpink;
        top: 100px;
        left: 100px;
    }

    div:nth-child(3) {
        background-color: lightyellow;
        top: 150px;
        left: 150px;
    }
</style>

<body>
    <div>光頭強</div>
    <div>熊大</div>
    <div>熊二</div>
</body>

</html>

定位拓展

1.絕對定位的盒子居中?

加了絕對定位的盒子不能通過margin:0 auto水平居中,但是通過計算實現水平和垂直居中

left:50% 讓盒子的左側移動到父級元素的中心位置
margin-left:-1/2*元素寬度讓盒子向左移動自身寬度的一半

2.定位特殊特性

行內元素添加絕對或者固定定位,可以直接設置高度和寬度
塊級元素添加絕對或者固定定位,如果不給寬度或者高度,默認大小是內容的大小

3.脫標的盒子不會觸發外邊距塌陷

浮動元素,絕對定位(固定定位) 元素的都不會觸發外邊距合并的問題.

外邊距塌陷:兩個嵌套關系的（父子關系）塊元素，當父元素有上外邊距或者沒有上外邊距（margin-top），子元素也有上外邊距的時候。兩個上外邊距會合成一個上外邊距，以相對較大的上外邊距值為準(下邊距一樣)。左右邊距不會出現這種問題。

4.絕對定位(固定定位)會完全壓住盒子

絕對定位(固定定位)會壓住下面標準流所有的內容[包括文字浮動不會壓住文字]

在線咨詢

上一篇：前端基礎：HTML
下一篇：推薦幾個個人精美網站響應式html5網站模板

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

HTML中的定位

一、position 屬性的作用

二、static 屬性值

三、relative，absolute，fixed

3.1 relative 屬性值

3.2 absolute 屬性值

3.3 fixed 屬性值

四、sticky 屬性值

五、 sticky 的應用

5.1 堆疊效果

5.2 表格的表頭鎖定

免費前端全棧課程

References

什么需要定位?

定位組成

相對定位 relative

絕對定位 absolute

子絕父相

固定定位 fixed

?粘性定位 sticky

定位小總結?

定位疊放次序 z-index

定位拓展

您的項目需求