Chrome浏览器中的position:sticky属性忽略right值。

Question

Chrome浏览器中的position:sticky属性忽略right值。

8

我有一个非常简单的需求：使元素在屏幕右侧粘性固定。

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

然而，接下来让我大吃一惊：虽然上述的解决方法按预期工作（元素粘在右侧），但 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>

- brett

相关：https://dev59.com/zlQJ5IYBdhLWcg3wFxx_#54610362 .. right 不会定位元素。它的工作方式与 absolute 和 fixed 不同。 - Temani Afif

这是否意味着Firefox的行为实际上是错误的？在FF中，“right: 0”的工作方式符合我的预期。 - brett

你的代码在两个浏览器中表现一致（至少对我来说是这样），除非你有一个错误，否则它应该在两个浏览器中表现一致。 - Temani Afif

你说得对，我之前的结构比较复杂，导致在Firefox中右对齐生效了。但是在简化结构后，我也在Firefox中遇到了同样的问题。我的问题仍然存在，我想要了解粘性元素的左右定位。 - brett

请阅读我分享的链接，我正在解释上/下，同样适用于左/右。 - Temani Afif

谢谢，我看到了很多关于上下问题的解答，但没有意识到左右也是同样的问题。 - brett

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Temani Afif · Accepted Answer

你混淆了absolute和fixed的工作原理与sticky的比较。

引用：

“可以将粘性定位视为相对定位和固定定位的混合。粘性定位的元素被视为相对定位，直到它越过指定的阈值，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>

您可以清楚地看到，元素的位置不是由左或右定义的。当我们滚动时，左和右仅定义元素应保持与屏幕边缘的距离。

更多详细信息，请参阅以下相关问题：为什么在position:sticky中bottom:0无法正常工作？如果您将bottom:0指定为position: sticky，则为什么会执行与规格不同的操作？为什么在可滚动容器内使用left:0的position:sticky不起作用？