css - 位置 :sticky ignoring right value in 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 仅定义了滚动时元素应与屏幕边缘保持的距离。
相关问题了解更多详情:
Why bottom:0 doesn't work with position:sticky?
If you specify `bottom: 0` for position: sticky, why is it doing something different from the specs?
Why isn't position:sticky with left:0 working inside a scrollable container?