css 粘性定位

作者：浮云过影发布日期:2025-10-21 浏览:92

/* 粘性定位示例代码 */

.sticky {
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 10px; /* 当元素的顶部距离视口顶部 10px 时，触发粘性定位 */
}

/* HTML 示例 */
<div class="container">
  <div class="sticky">我会在滚动到顶部 10px 时变得固定</div>
  <div class="content">
    <!-- 其他内容 -->
  </div>
</div>

解释说明：

position: sticky; 是一种特殊的定位方式，它结合了相对定位和固定定位的特点。
top: 10px; 表示当页面滚动到该元素距离视口顶部 10px 时，元素会变为固定定位，停留在这个位置。
当页面继续滚动，超出这个范围后，元素又会恢复为相对定位。

上一篇：css flex 间距

下一篇：css过渡动画