目录

一、粘性定位 sticky

 二、粘性定位特点

三、粘性定位实例

 四、粘性定位为什么不起作用


一、粘性定位 sticky

   sticky跟前面四个属性值都不一样,它会产生动态效果,很像relativefixed的结合:一些时候是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 相对定位

 滑动页面 box2 变成绝对定位

 四、粘性定位为什么不起作用

有时候设置会发现粘性定位不起作用,又找不到原因,可以看看有没有以下几点原因:

1、父元素不能overflow:hidden或者overflow:auto属性。
2、必须指定top、bottom、left、right4个值之一,否则只会处于相对定位
3、父元素的高度不能低于sticky元素的高度
4、sticky元素仅在其父元素内生效

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。