问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

关于position值“sticky”的理解上的一个问题？

头像
derline
    15223248

    教程上都在说，sticky是relative和fixed的混合体，因为sticky的元素在滚动到某个阈值点之前，表现得“像relative定位一样”----这里我很不理解，以我的观察来看，元素在滚动到阈值点之前，就是普通的static定位啊，这时你设置的top left这些也根本不生效！为什么说是relative定位呢？
    谢谢。

    前端csscss3
    阅读 2.5k
    2 个回答
    得票最新
    头像
    力能扛鼎的黄瓜
      121

      在学习 sticky 时跟题主有一样的疑惑，在未达到阈值点时，top 属性并不生效，所以表现得完全就是 static 的状态。（楼上答主给出的示例之所以生效是因为将元素放置在最顶部，这个时候其实已经达到了阈值点）

      经过我的查询有一点收获，特意注册账号分享下我的理解。

      首先，在 W3C 中关于 sticky 的描述原文如下：

      Sticky positioning is similar to relative positioning except the offsets are automatically calculated in reference to the nearest scrollport.

      粘性定位类似于相对定位，只不过偏移是相对最近的滚动视口计算的。

      其实，上面这句话已经将 sticky 说的很清楚了，至于将 sticky 看做是 relative 和 fixed 的结合体最早应该来源于 MDN 中的描述原文如下：

      This is basically a hybrid between relative and fixed position. It allows a positioned element to act like it's relatively positioned until it's scrolled to a certain threshold (e.g., 10px from the top of the viewport), after which it becomes fixed.

      这基本上是 relative 和 fixed 的结合体。它允许定位的元素表现得像是相对定位，直到滚动到某个阈值（例如，距离视口顶部 10px），之后它就表现得像固定定位。

      我们不能说这句话错误，因为这里说是“基本上”和“像”。我们可以按照这样的理解，但是不能要求 sticky 真得具有 relative 和 fixed 的性质。（毕竟我们已经认可了达到阈值点之后，元素是相对于滚动视口定位而不是真的和 fixed 一样相对视口定位，所以没必要要求达到阈值点之前，元素必须真的和 relative 一样能够设置 top 属性）

      头像
      陟上晴明
        21.6k145191

        生效啊？为啥不生效？

        <body>
  <div class="wrap">
    <div class="sticky"></div>
    <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
    <p>"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"</p>
  </div>
</body>
        .wrap{
  width: 500px;
  height: 500px;
  border: 2px solid red;
  overflow-y: scroll;
}
.sticky{
  width: 100px;
  height: 100px;
  background: blue;
  position: sticky;
  top: 100px;
}
        撰写回答
        你尚未登录，登录后可以
        • 和开发者交流问题的细节
        • 关注并接收问题和回答的更新提醒
        • 参与内容的编辑和改进，让解决方法与时俱进
        推荐问题