水平位置：粘性和宽度：自动如何相关？

Question

有一个水平粘性元素，我希望 width 不能是 auto，这样粘性才能正常工作。

因此，虽然此剪辑有效，但删除 width: 100px; 将导致非粘性行为。

#a {
  position: sticky;
  left: 0;
  background: red;
  width: 100px;
}

#b {
  /* this is to make a scrollbar */
  width: 3000px;
  background: blue;
}

<div id="a">a</div> 
<div id="b">b</div> 

为什么会这样？ 我有点假设浏览器需要宽度来检测元素何时离开视口，但为什么这不适用于水平但垂直模式下的自动计算宽度？

Answer 1

粘性定位元素仍被限制在其包含块的边界内。当您的元素具有自动宽度并沿水平轴粘性定位时，在其包含块的最右边开始推动它之前，它没有剩余空间可以粘贴，因为它的包含块被滚动出视图。

:root {
  border: medium solid fuchsia;
}

#a {
  position: sticky;
  left: 0;
  background: red;
  width: 100px;
}

#t:not(:checked) ~ #a {
  width: auto;
}

#b {
  /* this is to make a scrollbar */
  width: 3000px;
  background: blue;
}

<input type="checkbox" id="t" checked><label for="t"><code>width: 100px;</code></label>
<div id="a">a</div> 
<div id="b">b</div>