粘性定位（sticky）详解

深街孤影

已于 2023-04-28 11:19:38 修改

阅读量4.3w

点赞数 28

分类专栏： # CSS 文章标签： css 前端

于 2021-11-13 16:07:04 首次发布

本文链接：https://blog.csdn.net/weixin_51081257/article/details/121305642

版权

CSS 专栏收录该内容

4 篇文章

订阅专栏

本文详细介绍了CSS粘性定位（sticky）的工作原理，包括其如何结合relative和fixed的特点，在页面滚动时动态切换定位方式。通过实例展示了粘性定位在实际中的应用，并列举了可能导致粘性定位不起作用的常见问题，如父元素overflow属性限制、缺少定位偏移量等。了解这些知识点，有助于开发者更有效地使用粘性定位实现网页布局的动态效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、粘性定位 sticky

sticky跟前面四个属性值都不一样，它会产生动态效果，很像relative和fixed的结合：一些时候是relative定位（定位基点是自身默认位置），另一些时候自动变成fixed定位（定位基点是视口）。

语法：

选择器 { position: sticky; top: 10px; }

sticky能够形成"动态固定"的效果。比如，百度新闻首页的导航栏，初始加载时在自己的默认位置（relative定位）

相对定位

滚动条下滑变成固定定位页面滚回去又会变成想对定位

二、粘性定位特点

以浏览器的可视窗口为参照点移动元素（固定定位特点）
粘性定位占有原先的位置（相对定位特点）
必须添加 top 、left、right、bottom 其中一个才有效

三、粘性定位实例

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .wrap {
      height: 2000px;
      width: 100%;
      background-color: skyblue;

    }

    .box1 {
      width: 80%;
      height: 100px;
      background-color: teal;
      margin: 0 auto;
    }

    .box2 {
      width: 200px;
      height: 600px;
      background-color: pink;
    
      top: 0;

      margin: 0 auto;
    }

    .sticky {
      position: sticky;
      top: 0px;
    }
  </style>
</head>

<body>
  <div class="wrap">
    <div class="box1"></div>
    <div class="box2 sticky"></div>
    <div class="box1"></div>
  </div>
</body>

</html>

打开页面 box2 相对定位