位置：粘性忽略铬中的正确值

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感到困惑。fixedsticky

粘性定位可以被认为是相对定位和固定定位的混合体。粘性定位的元素被视为相对定位，直到它超过指定的阈值 ^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 仅定义滚动时元素与屏幕边缘应保持的距离。

相关问题了解更多详情：

为什么bottom:0 不能与position:sticky 一起使用？

如果您为position：sticky指定“bottom：0”，为什么它会做与规范不同的事情？

为什么position:sticky 和 ​​left:0 不能在可滚动容器内工作？