文掌握：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小时内与您取得联系。

整合营销服务商