position:sticky 忽略 chrome 中的正确值

Question

我有一个很简单的需求：让元素粘在屏幕右侧。

~~在 Firefox~~ 中一切正常，但在 Chrome 中 right: 0 属性被忽略。我说没关系，我可以通过使用 left: calc(100% - 80px); 来实现我的目标，但这是一个幸运的案例，当我知道粘性元素的宽度时。

然而我感到困惑：虽然上述解决方法按预期工作（elemtn 坚持在右边），left: 100%; 也是如此，left: 2000% 也是如此，没有触发溢出（在 Chrome 和 Firefox 中测试）。我显然遗漏了一些东西。可能我不懂粘性元素的左右定位，~~虽然Firefox和Chrome有明显区别。~~

left: calc(100% - var(--element-width)) 完全有道理，但谁能解释一下：为什么 right 被忽略了，为什么 left: 100% 和 left: 2000% 也起作用（即它定位我希望 right: 0 放置它的元素，当它明显溢出时。）

.wrapper{
  width:100%;
  position:relative;
}
.container{
  height: 2000px;  
}
.floater{
  position:sticky;
  height:200px;
  width:80px;
  background:red;
  top:200px;
  right:0;  
}

<div class="wrapper">
    <div class="container">
      <div class="floater">
        hei!
      </div>
    </div>
</div>

Answer 1

您混淆了 absolute 和 fixed 与 sticky 相比的工作方式。

Sticky positioning can be thought of as a hybrid of relative and fixed positioning. A stickily positioned element is treated as relatively positioned until it crosses a specified threshold, ^ref

right 和 left 将定义偏移量只有当元素可以滚动时。他们永远不会将元素定位到容器的右侧或左侧。

一些示例：

.box {
  border:2px solid;
  height:100px;
  margin:0 40px;
}
.box > div {
  position:sticky;
  height:100%;
  width:100px;
  background:red;
  right:20px;
  left:20px;
}

body {
  width:200vw;
}

a left sticky behavior
<div class="box">
  <div></div>
</div>
I move the element to the right using margin and we have a right sticky behavior
<div class="box">
  <div style="margin-left:auto;"></div>
</div>

你可以清楚地看到元素的位置不是由 left 或 right 定义的。 right 和 left 仅定义滚动时元素应与屏幕边缘保持的距离。

position:sticky 忽略 chrome 中的正确值

position:sticky ignoring right value in chrome

css

google-chrome

sticky