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>

水平位置：粘性和宽度：自动之间有何关系？

1 个答案: