性定位可以被認為是相對定位(position: relative)和固定定位(position: fixed)的混合。元素在跨越特定閾值前為相對定位，之后為固定定位。例如:

.sticky-header {
  position: sticky;
  top: 10px; 
}

在 視口滾動到元素 top 距離小于 10px 之前，元素為相對定位。之后，元素將固定在與頂部距離 10px 的位置，直到視口回滾到閾值以下。

粘性定位常作用在導航和概覽信息(標題，表頭，操作欄，底部評論等)上。這樣，用戶在瀏覽詳細信息時，也能看到信息的概覽和做一些操作，給用戶帶來便捷的使用體驗。

粘性定位看著很簡單，但也很容易出現不生效的情況。為幫助大家徹底理解粘性定位，本文會從 3 個方面來介紹：

• 粘性定位的原理。
• 不生效的情況。
• 具體的例子。

原理

為便于理解粘性定位，這里引入四個元素：視口元素，容器元素，粘性約束元素 和 sticky 元素。它們的關系如下：

視口元素：顯示內容的區域。會設置寬，高。一般會設置 overflow:hidden。
容器元素：離 sticky 元素最近的能滾動的祖先元素。
粘性約束元素：粘性定位的父元素。有時，也會出現粘性約束元素就是容器元素的情況。
sticky 元素：設置了 position: sticky; 的元素。

滾動時，sticky 元素設置的 left, right, top, bottom 的值相對的是容器元素。當粘性約束元素滾出視口時，sticky 元素也會滾出視口。

不生效的情況

情況1: 未指定 top, right, top 和 bottom 中的任何一個值

此時，設置 position: sticky 相當于設置 position: relative。

要生效，要指定 top, right, top 或 bottom 中的任何一個值。

情況2: 垂直滾動時，粘性約束元素高度小于等于 sticky 元素高度

不生效的原因：當粘性約束元素滾出視口時，sticky 元素也會滾出視口。粘性約束元素比 sticky 元素還小，sticky 元素沒有顯示固定定位狀態的機會。

同樣的，水平滾動時，粘性約束元素寬度小于等于 sticky 元素寬度時，也不會生效。

情況3: 粘性約束元素和容器元素之間存在 overflow: hidden 的元素

該情況的示例代碼:

<div class="viewport">
  <div class="container"> <!-- 容器元素 -->
    <div style="overflow: hidden">
      <div> <!-- 粘性約束元素 -->
        <div class="stick-elem">...</div>  <!-- sticky 元素 -->
        ...
      </div>
    </div>
  </div>
</div>

要生效，要把 overflow: hidden 的元素移除。

具體的例子

例子1: 頁面滾動

這個例子，我們來實現頁面滾動到文章內容時，文章標題吸頂的效果。

HTML 結構如下：

<div class="header">網站頭部</div>
<!-- 粘性約束元素 -->
<div class="article">
  <!-- sticky 元素 -->
  <h2 class="title">徹底理解粘性定位 - position: sticky</h2>
  <div class="content">...</div>
</div>
<div class="footer">網站底部</div>

在這個例子中，視口元素和容器元素都是 body。sticky 元素是 .title，因此只要在 sticky 元素上設置如下樣式即可:

.title {
  position: sticky;
  top: 0;
  background-color: #fff;
}

例子2: 文章列表

這個例子，我們來實現一塊區域下有多篇文章，區域滾動到文章內容時，對應的標題和操作按鈕吸頂的效果。

HTML 結構如下：

<!-- 視口元素 -->
<div class="viewport">
  <!-- 容器元素 -->
  <div class="container">
    <!-- 文章:粘性約束元素 -->
    <div class="article">
      <div class="sticky-header">
        <h2>徹底理解粘性定位 - position: sticky</h2>
        <div class="options">
          <button>轉發</button>
          <button>點贊</button>
        </div>
      </div>
      <div class="article-content">...</div>
  </div>
  <!-- 文章 -->
  <div class="article">...</div>
  <div class="article">...</div>
</div>

在這個例子中，視口元素是 .viewport，容器元素是 .container。sticky 元素是 .sticky-header。核心樣式如下:

/* 視口元素 */
.viewport {
  width: 50%;
  overflow: hidden;
  height: 200px;
}
/* 容器元素 */
.container {
  overflow: auto;
  height: 100%;
}
/* 粘性約束元素 */
.article {
  margin-bottom: 10px;
}
/* sticky 元素 */
.sticky-header {
  position: sticky;
  top: 0;
  padding: 5px 0;
  background-color:#fff;
}

例子3: 甘特圖

最后，我們來做個復雜點的例子：甘特圖。如下圖所示：

需要實現：

• 左側事項菜單總在最左側。
• 菜單的頭部和時間軸吸頂。
• 時間軸的年總在月的最左邊。

Web前端開發-CSS入門干貨01 、Web前端開發-CSS入門干貨02 、Web前端開發-CSS布局-盒子模型入門干貨 介紹了CSS重要基礎概念選擇器和字體系列、文本系列、背景系列樣式以及CSS布局中元素的盒子模型，下面介紹CSS布局中另外兩個重要應用浮動和定位。

根據元素浮動、定位的特性可以將CSS布局分為三種：標準流、浮動流、定位流；

其中標準流是利用塊級元素獨占一行、自上而下，行內元素一行顯示、遇到阻礙自動換行、自左向右的布局方式。

1.浮動

（1）什么是浮動

元素脫離原先位置，不再占據空間，相對于未浮動元素類似漂浮在其上面；

浮動元素具有了行內塊元素特性，并實現貼邊布局。這里的邊可以是父級元素的邊也可以是同樣浮動的兄弟級元素的邊。

（2）浮動解決的問題

改變塊級元素默認的垂直布局方式，改為橫向布局。

行內塊樣式（display: inline-block;）也可以改變塊級元素的布局方式，但是不能靈活解決兩個塊級元素之間縫隙、不能靈活解決多個塊級元素分別實現左對齊、右對齊等問題。當然如果想要塊級元素隨意放置，那就要用到定位了。

（3）浮動的語法

選擇器 {float:none/left/right}，對選擇器選擇的元素實現不浮動、左浮動、右浮動。

（4）浮動的典型應用

通過不浮動的塊級元素+嵌套在其內內的浮動元素，實現頁面各種布局。

塊級元素實現縱向布局，浮動的元素實現橫向布局。

（5）因為浮動引出的問題

浮動元素通常嵌套在一個不浮動的元素內，進行配合使用；所有浮動元素的高以及外邊距之和不能超過那個不浮動元素，否則出現重疊。

那么當嵌套的浮動的子元素數量不確定時，那么父級元素的高度就不能確定。為了解決這個問題，提出來不設置父級元素的高度，讓子元素的高度之和成為父元素高度的方式；然而浮動的子元素具有脫離原先位置、不占空間的特點，那么父元素的高度只會是0，在父元素之后的兄弟元素就會與上一個父元素內浮動元素發生重疊。為了解決這個問題，提出來清除浮動。

（6）清除浮動

1）語法

選擇器 {clear:right/left/both};清除選擇器選中的元素的右浮動、左浮動、左右浮動。

2）清除浮動方式

a）額外標簽法

添加一個與浮動元素同級的空標簽（塊級），并為其設置清除浮動的樣式。

<style>
.one {float:left}
.kongbq {clear:both} 
</style>

<div class="box">
<div class="one"> </div>  
<div class="kongbq"> </div>
</div>

b）父級元素添加overflow樣式（常用）

語法：選擇器 {overflow:hidden}

c）父級元素添加after偽元素樣式（常用）

樣式如下：

.clearfixry:after {
content:"";
display:block;
height:0;
clear:both;
visibility:hidden;
}
.clearfixry { /*IE6、7專有*/
*zoom:1;
}

d）父級元素添加雙偽元素（常用）

樣式如下：

.clearfixry:before,.clearfixry:after {
content:"";
display:table;
}
.clearfixry:after {
clear:both;
}
.clearfixry { /*IE6、7專有*/
*zoom:1;
}

2.定位

（1）什么是定位

將html元素放置在任意指定的位置，提高頁面布局的靈活性。

（2）定位解決的問題

比如頁面側邊固定的工具欄、輪播圖

（3）定位的實現方式

利用定位模式+邊偏移，在樣式中設定定位模式，然后設定元素盒子模型邊偏移。

1）邊偏移

包括top、right、bottom、left四個分項。

2）定位模式分類

a）靜態定位（static）：元素無偏移，也即元素本身的默認布局方式。

語法：選擇器 {position:static;}

b）相對定位（relative）：相對元素自身原先位置設置偏移。（常用）

語法：選擇器 {position:relative;}

需要注意的是設置了相對定位的元素仍舊實際占據位置

c）絕對定位（absolute）：相對于元素的擁有定位的父級（或者更高級）元素進行定位。（常用）

語法：選擇器 {position:absolute;}

需要注意的（1）設置的絕對定位的元素的參考依據是有定位模式的父級或者更高級元素的。

（2）設置了絕對定位的元素會有浮動效果，即不再占有位置。

d）固定定位（fixed）：相對于瀏覽器可視區域，在某個位置固定不動。（常用）

語法：選擇器 {position:fixed;}

需要注意的（1）設置的固定定位的元素的參考依據瀏覽器當前可視窗口。

（2）設置了固定定位的元素會有浮動效果，即不再占有位置。

e）粘性定位（sticky）：被認為是相對定位和固定定位的混合。元素在跨越特定偏移前為相對定位，之后為固定定位。

語法：選擇器 {position:sticky; top:10px;}

需要注意的是（1）粘性定位一定要設置邊偏移（任何邊都可行），否則其功能和相對定位相同。

（2）設置的粘性定位的元素的參考依據瀏覽器當前可視窗口。

（3）設置的粘性定位的元素仍舊實際占據位置

#學問分亨官##閃光時刻二期##閃光時刻第二期主題征文#

SS的position屬性用于指定元素在文檔流中的定位方式，position屬性和top、bottom、left、right屬性一起決定元素的最終位置。position屬性擁有static、relative、absolute、fixed、sticky五個可選項，下面動畫展示了一個吸頂導航菜單的樣式，當向上滾動頁面時導航菜單始終黏在頂部位置，使用sticky屬性可以輕松實現這個效果。

在正式引出sticky特性之前，有必要重新回顧下position各個屬性的特征，真正理解了它們的含義用起來才會得心應手，出現問題也有清晰的思路去排查并解決它，而且理解sticky也依賴對其他屬性的理解。

static是默認行為

該關鍵字指定元素使用正常的布局行為，即元素在文檔常規流中當前的布局位置。此時 top, right, bottom, left 和 z-index 屬性無效。見下圖黃色方框的位置，它所在的位置就是正常文檔流應在的位置。

relative是相對原位置的偏移

該關鍵字下，元素先放置在未添加定位時的位置，在不改變頁面布局的前提下調整元素位置。繼續看黃色方框，假如僅僅設置position為relative的話，黃色方框的位置和static位置是一樣的，也就是它按照正常文檔流布局，但是此時top、left、right、bottom屬性會改變黃色方框的位置，示例中黃色方框相對于原有位置向左、向下偏移了40px。

absolute是相對父級元素的偏移

元素會被移出正常文檔流，并不為元素預留空間，通過指定元素相對于最近的非 static 定位祖先元素的偏移，來確定元素位置。包裹黃色方框的元素position被設置為relative，那么黃色方框就會依據其父級元素的位置為基準進行定位，示例中它相對于父級元素向左、向下偏移40px。

fixed是相對于視口的偏移

元素會被移出正常文檔流，并不為元素預留空間，而是通過指定元素相對于屏幕視口（viewport）的位置來指定元素位置。下面的示例點擊固定定位后，黃色方框移到了瀏覽器視口向左、向下40px的位置，且無論頁面如何滾動，黃色框的位置始終和瀏覽器視口相對位置不變。

sticky是relative和fixed的結合體

最后，終于說到了ticky屬性，它是relative和fixed屬性的結合體，示例中黃色方框的樣式設置為"position: sticky; top: 20px;"，為了演示sticky的效果，將其上級元素設置了一個固定的高度并顯示滾動條，當黃色方框與父元素的頂部高度大于20px時，它表現出relative的行為（也和static相似），正常布局到文檔流中；當達到top為20px閾值之后，黃色方框始保持top=20px的位置，表現出黏在頂端的效果，此時表現出fixed的行為。

最后給出上面演示示例的完整源碼，實際運行并點擊每個選項實際體驗一下，相信理解會更加深刻：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css position演示</title>
    <style>
        body {
            font-size: larger;
        }

        .box {
            float: left;
            margin: 1rem;
            width: 100px;
            height: 100px;
            border: 3px solid #00f;
            background: rgba(0, 0, 255, .2);
        }

        #example-element {
            border: 3px solid #f00;
            background: rgba(255, 255, 0, .6);
        }

        #example-option {
            display: flex;
            flex-flow: column;
        }

        table {
            border-collapse: collapse;
            border: 1px solid gray;
        }

        td {
            padding: 16px;
            border-right: 1px solid gray;
        }

        button {
            margin: 0.5rem;
            padding: 1rem 2rem;
        }
    </style>
</head>

<body>
    <h1>Position屬性效果演示</h1>
    <table>
        <tr>
            <td id="example-option">
                <button onclick="updateStyle('static')">
                    默認定位 <br>
                    position: static;
                </button>
                <button onclick="updateStyle('relative')">
                    相對定位<br>
                    position: relative;
                    top: 40px; left: 40px;
                </button>
                <button onclick="updateStyle('absolute')">
                    絕對定位<br>
                    position: absolute;
                    top: 40px; left: 40px;
                </button>
                <button onclick="updateStyle('fixed')">
                    固定定位<br>
                    position: fixed;
                    top: 40px; left: 40px;
                </button>
                <button onclick="updateStyle('sticky')">
                    粘性定位<br>
                    position: sticky;
                    top: 20px;
                </button>
            </td>
            <td id="output">
                <div style="height: 452px;overflow: scroll;">
                    <div style="position: relative;">
                        <p>這個示例演示css position屬性</p>
                        <br>
                        <br>
                        <br>
                        <div class="box"></div>
                        <div class="box" id="example-element"></div>
                        <div class="box"></div>
                        <p style="clear: left;">為了演示position: sticky效果</p>
                        <p>這里增加了一個可滾動的容器</p>
                        <p>上下滾動這段內容</p>
                        <p>你將發現黃色框會始終停留在視線范圍內</p>
                        <p>就像黏在在頂部一樣</p>
                        <p>重新向下滾動</p>
                        <p>黃色框還會恢復到原來的位置</p>
                        <p>使用sticky特性</p>
                        <p>可以實現很多特效</p>
                        <p>比如始終黏在頂部的菜單欄</p>
                        <p>發揮想象力還可以實現其他效果...</p>
                    </div>
                </div>
            </td>
        </tr>
    </table>

    <script>
        function updateStyle(position_mode) {
            let box=document.getElementById("example-element")
            if (position_mode=='static') {
                box.style=""
            } else if (position_mode=='relative') {
                box.style="position: relative; top: 40px; left: 40px;"
            } else if (position_mode=='absolute') {
                box.style="position: absolute; top: 40px; left: 40px;"
            } else if (position_mode=='fixed') {
                box.style="position: fixed; top: 40px; left: 40px;"
            } else if (position_mode=='sticky') {
                box.style="position: sticky; top: 20px;"
            }
        }
    </script>
</body>

</html>

參考文獻

[1]. https://developer.mozilla.org/zh-CN/docs/Web/CSS/position