css粘性定位

作者：徒醉了清风发布日期:2026-06-15 浏览:56

/* CSS 粘性定位示例 */

/* 定义一个容器，用于放置粘性定位的元素 */
.container {
  height: 2000px; /* 设置容器高度，以便可以滚动查看效果 */
}

/* 使用粘性定位的元素 */
.sticky-element {
  position: sticky;
  top: 10px; /* 当页面滚动时，元素会在距离顶部 10px 的位置停止滚动 */
  background-color: yellow;
  padding: 10px;
}

/* 解释说明：
 * `position: sticky;` 是一种特殊的定位方式，它结合了相对定位和固定定位的特点。
 * 当元素在视口内滚动到指定的偏移量（如 `top: 10px`）时，元素会“粘”在这个位置，不再随页面滚动而移动。
 * 这种定位方式非常适合用于导航栏、侧边栏等需要在页面滚动时保持可见的元素。
 */

上一篇：css 瀑布流

下一篇：css 背景渐变色