文掌握：position: sticky深度解析與實戰應用

掌握：position: sticky深度解析與實戰應用

一、引言：position: sticky 的誕生與價值

在網頁布局設計中，隨著用戶交互需求的日益復雜，對元素定位方式的需求也愈發多樣。CSS 中的 `position` 屬性作為控制元素布局的關鍵手段，早已為人所熟知。然而，對于 `position: sticky` 這一相對較新的屬性值，可能部分開發者還對其理解不深，或者在實際項目中運用不多。本文將對 `position: sticky` 進行深度解析，并通過實戰應用示例，幫助您全面掌握這一特性，提升前端開發效率與用戶體驗。

二、基礎篇：理解 position: sticky

1. 定義與工作原理

**position: sticky** 是 CSS3 引入的一種新的定位模式，它結合了 `relative` 和 `fixed` 的特點，使得元素在特定條件下可以"粘附"在某個位置。具體來說，當元素處于其容器視口（viewport）內時，表現為相對定位（`relative`）；而當元素滾動到指定邊界時，開始固定在屏幕相應位置，表現為固定定位（`fixed`）。這種特性使得 sticky 元素能夠在保持頁面整體布局的同時，提供出色的滾動交互效果。

2. 適用場景

- **導航欄**：常用于固定頂部導航欄，使其在頁面滾動時始終保持可見。

- **側邊欄**：如目錄列表、標簽欄等，確保用戶在瀏覽長篇文章或復雜表格時，始終能快速訪問相關鏈接。

- **購物車/工具欄**：在電商網站中，讓購物車或篩選工具欄在滾動時固定顯示，便于用戶隨時操作。

- **頁腳注釋**：固定底部版權信息、返回頂部按鈕等，提高用戶閱讀體驗。

三、進階篇：position: sticky 實現細節

1. 必備條件與關鍵屬性

**sticky 元素生效需滿足以下條件**：

- 父元素必須具有非默認的可滾動區域（即 `overflow` 不為 `visible`）。

- 元素自身需設置 `position: sticky` 及至少一個偏移屬性（`top`, `bottom`, `left`, `right`）。

**關鍵屬性詳解**：

- `top` / `bottom`：定義元素相對于最近已定位祖先（通常為父容器）頂部或底部的距離。當元素滾動到該距離時，元素開始固定。

- `left` / `right`：定義元素相對于最近已定位祖先左側或右側的距離。一般與 `top` 或 `bottom` 配合使用，實現水平方向的粘性定位。

2. 注意事項

- **瀏覽器兼容性**：盡管 `position: sticky` 已被大多數現代瀏覽器支持，但在某些老舊版本（如 IE/Edge < 16）中尚不兼容。需配合使用 feature detection 或 polyfill 保證兼容性。

- **層疊上下文**：sticky 元素會創建一個新的層疊上下文，可能影響其他元素的 z-index 層級關系。在復雜布局中需注意調整。

- **內容溢出**：當 sticky 元素內部內容溢出時，可能導致其固定效果失效。應確保元素自身高度適應內容，或使用 `overflow` 屬性處理內部溢出。

四、實戰篇：position: sticky 應用案例

案例一：固定頂部導航欄

html
<style>
  .header {
    position: sticky;
    top: 0;
    background-color: #f8f9fa;
    padding: 1rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    z-index: 100; /* 保持在其他元素之上 */
  }
</style>

<header class="header">
  <nav>
    <!-- 導航鏈接 -->
  </nav>
</header>

<main>
  <!-- 頁面主要內容 -->
</main>

案例二：側邊懸浮目錄

html
<style>
  .sidebar {
    position: sticky;
    top: 50px; /* 與頁面頂部保持一定距離 */
    left: 0;
    width: 300px;
    background-color: #f8f9fa;
    padding: 1rem;
  }
</style>

<main>
  <aside class="sidebar">
    <!-- 目錄內容 -->
  </aside>

  <article>
    <!-- 文章正文 -->
  </article>
</main>

案例三：購物車懸浮工具欄

html
<style>
  .cart-bar {
    position: sticky;
    bottom: 70px; /* 留出底部空白，避免遮擋頁面 footer */
    right: 20px;
    background-color: #fff;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }
</style>

<main>
  <!-- 商品列表等內容 -->

  <div class="cart-bar">
    <!-- 購物車按鈕、數量顯示等 -->
  </div>
</main>

五、總結與展望

**position: sticky** 提供了一種優雅且實用的元素定位方案，尤其適用于現代網頁設計中的滾動交互需求。通過深入理解其工作原理、關鍵屬性及注意事項，并結合實戰案例，開發者可以靈活運用 sticky 定位，提升網頁布局的動態性和用戶體驗。未來，隨著瀏覽器對 CSS 新特性的持續支持與優化，我們期待看到更多創新的 sticky 定位應用場景，進一步豐富網頁設計的表達力與互動性。

---

附錄：瀏覽器兼容性檢查與 Polyfill 使用

對于不支持 `position: sticky` 的老舊瀏覽器，可以借助于 Modernizr 進行功能檢測，并結合相應的 polyfill（如 `stickyfill`）來實現兼容。以下為基本使用示例：

安裝 Modernizr 和 stickyfill

bash
npm install modernizr stickyfilljs

在 HTML 中引入 Modernizr

html
<script src="path/to/modernizr.js"></script>

使用 Modernizr 檢測并應用 stickyfill

javascript
if (!Modernizr.positionsticky) {
  Stickyfill.add(document.querySelectorAll('.sticky-element'));
}

至此，您已全面掌握了 `position: sticky` 的深度解析與實戰應用。在未來的項目中，不妨嘗試運用這一特性，為您的用戶打造更為流暢、高效的交互體驗。

義

position 屬性用來指定一個元素在網頁上的位置，下午主要通過3個維度來講述：基準點、是否脫標與占有位置、是否需要設置邊距，一共有5種定位方式：static、relative、absolute、fixed、sticky。在講定位之前先講幾個概念：正常模式與脫標:

正常模式：

所謂正常模式，也就是正常占有位置，不影響下一個元素的布局，也就是說沒有漂浮起來。常見的有塊級元素與內聯元素：

塊級元素（典型的如div），在瀏覽器窗口（view point）中垂直布局——每個都將顯示在上一個元素下面的新行上，并且它們的外邊距將分隔開它們，常見的如多個div：

// html
<body>
    <div>I am div1</div>
    <div>I am div2</div>
    <div>I am div3</div>
</body>

// css
div {
    background-color: lightgrey;
    width: 100px;
    height: 50px;
} 
div:nth-child(2) {
    background-color: yellow;
    width: 100px;
    height: 50px;
}
div:last-child {
    background-color: red;
    width: 100px;
    height: 50px;
}

內聯元素表現不一樣——它們不會出現在新行上；相反，它們互相之間以及任何相鄰（或被包裹）的文本內容位于同一行上，只要在父塊級元素的寬度內有空間可以這樣做。如果沒有空間，那么溢流的文本或元素將向下移動到新行。

// html
<body>
    <span>I am span1</span>
    <span>I am span2</span>
    <span>I am span3</span>
</body>
// css
span {
    background-color: lightgrey;
    width: 100px;
    height: 50px;
} 
span:nth-child(2) {
    background-color: yellow;
    width: 100px;
    height: 50px;
}
span:last-child {
    background-color: red;
    width: 100px;
    height: 50px;
}

脫標

所謂脫標，就是脫離了”標準流“（有的叫”正常流“，英文是”normal flow“），本來該占有的位置就不再占有了，下一個元素會占有它的位置，此時元素會出現重疊現象，通過設置z-index大小來顯示元素重疊順序。

static 定位

static 是瀏覽器的默認定位方式，如果沒有給元素 style 添加 position，那么就是 static 定位。該定位的特征是： * 基準點：按代碼的順序來決定元素的布局，正常顯示模式，即所謂的”標準流“。 * 邊偏移：通過設置 top right bottom left 無效。 * 脫標：不脫標，正常占有該有的位置，不影響下一個元素布局。 * 使用場景：清除定位，即一個設置了非static定位的box，不要定位了，就使用static清除，在瀏覽器調試過程中非常重要，比如，可通過static查看原有的位置應該在哪。

// html
<body>
    <div>test static position</div>
</body>

// css
div {
  background-color: pink;
  top: 100px;
}

relative 定位

relative 相對定位方式，該定位方式的特征是： * 基準點：自己在static定位模式下的位置作為基準點，俗稱元素的默認位置。 * 邊偏移：必須通過設置 top / right / bottom / left 來準確定位。 * 脫標：不脫標，正常占有該有的位置，不影響下一個元素布局，下一個元素仍然以”標準流“看待它。 * 使用場景：一個很常用的口訣”子絕父相“，如果子元素需要設置absolute定位的時候，父元素可設置relative，當然還有其他場景了，這里不一一列舉。

<body>
    <div class="father">
        <div class="son"></div>
    </div>
</body>

// css
.father {
    background-color: lightgrey;
    width: 300px;
    height: 200px;
} 
.son {
    background-color: yellow;
    position: relative;
    top: 20px;
    width: 200px;
    height: 100px;
}

absolute 定位

absolute 絕對定位方式，該定位方式的特征是： * 基準點：一般是父元素，但是前提是父元素設置了一個非非非static定位，如果父元素沒有設置定位，那么就以瀏覽器窗口作為基點。 * 邊偏移：必須通過設置 top / right / bottom / left 來準確定位。 * 脫標：完全脫標，不占有該有的位置，影響下一個元素布局，下一個元素就當該元素不存在。 * 使用場景：如果一個元素需要以父元素的（0，0）坐標點對齊的時候，可以馬上想到 absolute ，還有需要轉化為inline-block模式也可以使用absolute。

//html
<body>
    <div class="father">
        <div class="son"></div>
        <div class="son2"></div>
    </div>
</body>
// css
.father {
    background-color: lightgrey;
    width: 300px;
    height: 200px;
} 
.son {
    background-color: yellow;
    position: absolute;
    top: 20px;
    width: 100px;
    height: 100px;
} 
.son2 {
    background-color: red;
    top: 20px;
    width: 200px;
    height: 150px;
}

fixed 定位

fixed 固定定位方式，該定位方式的特征是： * 基準點：瀏覽器窗口為基點，不管頁面怎么布局與滾動，該位置就固定不動。 * 邊偏移：必須通過設置 top / right / bottom / left 來準確定位。 * 脫標：完全脫標，不占有該有的位置，影響下一個元素布局，下一個元素就當該元素不存在。 * 使用場景：比如頁面可惡的廣告，你怎么滑動就停在那里不動。

// html
<body>
    <div class="father">
        <div class="son"></div>
        <div class="son2"></div>
    </div>
</body>

// css
.father {
    background-color: lightgrey;
    width: 300px;
    height: 200px;
} 
.son {
    background-color: yellow;
    position: fixed;
    right: 10px;
    width: 100px;
    height: 100px;
} 
.son2 {
    background-color: red;
    top: 20px;
    width: 200px;
    height: 150px;
}

sticky 定位

sticky 粘性定位方式，該定位其實包含了 relative 與 fixed 這兩種定位模式，但不是同時存在，需要一個觸發條件，即邊偏移 top / right / bottom / left 的值達到后就會切換 fixed 方式，不同定位方式，就分別顯示該方式的定位特征。 * 基準點：relative 方式以自身位置為基準點; fixed 方式以瀏覽器窗口為基點。 * 邊偏移：如果設置 top / right / bottom / left 就會同時具備relative 與 fixed 這兩種定位模式，如果沒設置就默認 relative， * 脫標：relative 不脫標，fixed 脫標 * 使用場景：比如頁面可惡的廣告，你怎么滑動就停在那里不動。

// html
<body>
    <div class="father">
        <div class="son"></div>
        <div class="son2"></div>
    </div>
</body>

// css
.father {
    background-color: lightgrey;
    position: relative;
    left: 200px;
    width: 300px;
    height: 1000px;
} 
.son {
    background-color: yellow;
    position: sticky;
    top: 30px;
    width: 90px;
    height: 60px;
} 
.son2 {
    background-color: red;
    top: 20px;
    width: 200px;
    height: 150px;
}

結語

以上就是對各種定位的解釋，在實際工作中也許會很復雜，但基本都是這些定位的巧妙運用，如果講述有什么錯誤，歡迎留言評論，碼子碼圖不易，碼gif圖更不容易，轉載請注明出處，謝謝。

性介紹

簡單來說position屬性主要是用來確定一個控件在頁面上的位置。

他的取值有五個：

1、static （默認）按照控件自身特點定位。

2、relative 相對位置定位

3、fixed 浮動定位

4、absolute 絕對位置定位

5、sticky 粘性定位

接下來我們具體的講一下這個幾個屬性的含義：

static屬性值（默認）

沒有設置或者設置的static值效果是一樣的瀏覽器都會默認為是staic值，這個時候瀏覽器會源代碼的順序，依次決定每個元素的位置。每個塊級元素占據自己的區塊（block），元素與元素之間不產生重疊，這個位置就是元素的默認位置。

可以看出三個元素就是依次往下排列，咱們接著往下看。

relative屬性值

這個是相對位置的意思，相對于那個呢相對的是這個元素如果是static屬性值的位置，它可以搭配top、bottom、left、right這四個屬性一起使用，用來確定相對于偏移的方向和距離。咱們用上面的item2為例來看一下：

這個時候我們看一下我們設置了relative屬性值以后有設置了top和left屬性，這個時候item2的位置有發生了便宜，在原來的基礎上向下和向右分別移動了10個和20個像素。從這里我們還可以發現一個問題就是item2和item3的位置發生了重疊。這個也是大家需要注意的地方。

fixed屬性值

這個是浮動位置的意思。就是這個元素會漂浮在頁面的上方的一個固定地方，不會跟素頁面的滾動而位置變動。在網頁中最常見到的就是在頁面的右下方一個“回到頂部的按鈕”，點擊頁面滾動到最頂端。同樣它也是搭配top、bottom、left、right這四個屬性一起使用，用來確定在頁面中的具體位置。如下：

absolute 屬性值

我的理解是絕對定位，他是相當于的上級定位基點元素來進行的定位。

首先我們現在確定一下他的上級定位基點元素，他可能是你的父級元素也可能是你父級以上的其他元素，怎么確定呢，我們就是從他的上級元素開始往上找，元素的position屬性不是static值的第一個上級元素就是所謂的“上級定位基點元素”，那么你的位置就是正對這個元素的控件進行的定位，同樣它也是搭配top、bottom、left、right這四個屬性一起使用，用來確定在頁面中的具體位置。

在這里我們還需要注意的一點就是position屬性值為absolute的控件是不占據控件的，那么出現的為題就可能跟其他元素產生重疊，他的重疊跟relative的重疊的區別在于relative的元素是占據空間的，占據的空間就是元素沒有偏移時候的位置大小。如下：

從這個圖中我們就可以看出item22 因為設置了position：absolute屬性值，item23的位置就移動到了item22原本應該占據的位置。

sticky 屬性值粘性定位

sticky生效的前提是，必須搭配top、bottom、left、right屬性一起使用，不能省略。

它的具體規則是，當頁面滾動，父元素開始脫離視口時（即部分不可見），只要與sticky元素的距離達到生效門檻，就相當于浮動定位不會在跟隨父元素滾定出窗口；等到父元素在回到之前狀態是他則自動在占據父元素中設置的空間位置，具體樣子從網上找一個例子吧，如下

這個屬性其實應用還是蠻不錯的只是由于這個屬性值出的比較晚。現在線上的好多大點的網站為了兼容低版本的瀏覽器沒有使用這個屬性值。不過現在絕大部分的瀏覽器都已經支持了這屬性值。相信以后他的使用會越來越廣泛。

今天position的使用大體講到這里，有哪講的不正確或者欠缺的歡迎大家指點一起學習。

這這里祝大家天天進步，越來越好。

在線咨詢

上一篇：HTML <summary> 標簽
下一篇：終于搞懂如何用Java去除HTML標簽了

您的項目需求

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

整合營銷服務商