文掌握：position: sticky深度解析與實戰(zhàn)應(yīng)用

掌握：position: sticky深度解析與實戰(zhàn)應(yīng)用

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

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

二、基礎(chǔ)篇：理解 position: sticky

1. 定義與工作原理

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

2. 適用場景

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

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

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

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

三、進階篇：position: sticky 實現(xiàn)細(xì)節(jié)

1. 必備條件與關(guān)鍵屬性

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

- 父元素必須具有非默認(rèn)的可滾動區(qū)域（即 `overflow` 不為 `visible`）。

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

**關(guān)鍵屬性詳解**：

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

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

2. 注意事項

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

- **層疊上下文**：sticky 元素會創(chuàng)建一個新的層疊上下文，可能影響其他元素的 z-index 層級關(guān)系。在復(fù)雜布局中需注意調(diào)整。

- **內(nèi)容溢出**：當(dāng) sticky 元素內(nèi)部內(nèi)容溢出時，可能導(dǎo)致其固定效果失效。應(yīng)確保元素自身高度適應(yīng)內(nèi)容，或使用 `overflow` 屬性處理內(nèi)部溢出。

四、實戰(zhàn)篇：position: sticky 應(yīng)用案例

案例一：固定頂部導(dǎo)航欄

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>
    <!-- 導(dǎo)航鏈接 -->
  </nav>
</header>

<main>
  <!-- 頁面主要內(nèi)容 -->
</main>

案例二：側(cè)邊懸浮目錄

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

<main>
  <aside class="sidebar">
    <!-- 目錄內(nèi)容 -->
  </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>
  <!-- 商品列表等內(nèi)容 -->

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

五、總結(jié)與展望

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

---

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

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

安裝 Modernizr 和 stickyfill

bash
npm install modernizr stickyfilljs

在 HTML 中引入 Modernizr

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

使用 Modernizr 檢測并應(yīng)用 stickyfill

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

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

義

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

正常模式：

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

塊級元素（典型的如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;
}

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

// 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;
}

脫標(biāo)

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

static 定位

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

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

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

relative 定位

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

<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 絕對定位方式，該定位方式的特征是： * 基準(zhǔn)點：一般是父元素，但是前提是父元素設(shè)置了一個非非非static定位，如果父元素沒有設(shè)置定位，那么就以瀏覽器窗口作為基點。 * 邊偏移：必須通過設(shè)置 top / right / bottom / left 來準(zhǔn)確定位。 * 脫標(biāo)：完全脫標(biāo)，不占有該有的位置，影響下一個元素布局，下一個元素就當(dāng)該元素不存在。 * 使用場景：如果一個元素需要以父元素的（0，0）坐標(biāo)點對齊的時候，可以馬上想到 absolute ，還有需要轉(zhuǎn)化為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 固定定位方式，該定位方式的特征是： * 基準(zhǔn)點：瀏覽器窗口為基點，不管頁面怎么布局與滾動，該位置就固定不動。 * 邊偏移：必須通過設(shè)置 top / right / bottom / left 來準(zhǔn)確定位。 * 脫標(biāo)：完全脫標(biāo)，不占有該有的位置，影響下一個元素布局，下一個元素就當(dāng)該元素不存在。 * 使用場景：比如頁面可惡的廣告，你怎么滑動就停在那里不動。

// 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 這兩種定位模式，但不是同時存在，需要一個觸發(fā)條件，即邊偏移 top / right / bottom / left 的值達(dá)到后就會切換 fixed 方式，不同定位方式，就分別顯示該方式的定位特征。 * 基準(zhǔn)點：relative 方式以自身位置為基準(zhǔn)點; fixed 方式以瀏覽器窗口為基點。 * 邊偏移：如果設(shè)置 top / right / bottom / left 就會同時具備relative 與 fixed 這兩種定位模式，如果沒設(shè)置就默認(rèn) relative， * 脫標(biāo)：relative 不脫標(biāo)，fixed 脫標(biāo) * 使用場景：比如頁面可惡的廣告，你怎么滑動就停在那里不動。

// 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;
}

結(jié)語

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

性介紹

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

他的取值有五個：

1、static （默認(rèn)）按照控件自身特點定位。

2、relative 相對位置定位

3、fixed 浮動定位

4、absolute 絕對位置定位

5、sticky 粘性定位

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

static屬性值（默認(rèn)）

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

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

relative屬性值

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

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

fixed屬性值

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

absolute 屬性值

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

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

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

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

sticky 屬性值粘性定位

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

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

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

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

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

在線咨詢

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

您的項目需求

*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商