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

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> 

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

标签： csscss-position

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>