水平 position:sticky 和 width:auto 有什么关系？

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>

水平 position:sticky 和 width:auto 有什么关系？

How is horizontal position:sticky and width:auto related?

css

css-position