Question

为什么当嵌套left: 0的嵌套元素正常粘贴时，带有top: 0的嵌套粘性元素不能粘贴？

.scroll {
  width: 200px;
  height: 200px;
  border: 1px solid;
  overflow: auto;
}

.container {
  width: 600px;
  height: 1000px;
}

.sticky-left {
  position: sticky;
  left: 0;
}

.sticky-top {
  position: sticky;
  top: 0;
}

<div class="scroll">
  <div class="sticky-top">sticky-top</div>
  <div class="sticky-left">sticky-left</div>
  <div class="container">
    <div class="sticky-top">sticky-top-nested</div>
    <div class="sticky-left">sticky-left-nested</div>
  </div>
</div>

Answer 1

让我们添加一些边框，我们将清楚地看到正在发生的事情：

.scroll {
  width: 200px;
  height: 200px;
  border: 1px solid;
  overflow: auto;
}
.scroll > div {
  border:2px solid green;
}

.container {
  width: 600px;
  height: 1000px;
  border:2px solid red!important;
}
.container > div {
  border:2px solid green;
}

.sticky-left {
  position: sticky;
  left: 0;
}

.sticky-top {
  position: sticky;
  top: 0;
}

<div class="scroll">
  <div class="sticky-top">sticky-top</div>
  <div class="sticky-left">sticky-left</div>
  <div class="container">
    <div class="sticky-top">sticky-top-nested</div>
    <div class="sticky-left">sticky-left-nested</div>
  </div>
</div>

如您所见，嵌套的粘性元素的宽度都等于父宽度（因为它们是块元素），因此没有空间让左粘性元素具有任何粘性行为¹，因为它具有width:100%，因为它的高度小于父级高度，它仍然可以粘住顶部的顶部。

对于非嵌套元素，我认为很清楚。

设置元素inline-block或减小其宽度，您将产生粘滞行为：

.scroll {
  width: 200px;
  height: 200px;
  border: 1px solid;
  overflow: auto;
}
.scroll > div {
  border:2px solid green;
}

.container {
  width: 600px;
  height: 1000px;
  border:2px solid red!important;
}
.container > div {
  border:2px solid green;
  width:150px;
}

.sticky-left {
  position: sticky;
  left: 0;
}

.sticky-top {
  position: sticky;
  top: 0;
}

<div class="scroll">
  <div class="sticky-top">sticky-top</div>
  <div class="sticky-left">sticky-left</div>
  <div class="container">
    <div class="sticky-top">sticky-top-nested</div>
    <div class="sticky-left">sticky-left-nested</div>
  </div>
</div>

¹粘性放置的元素是其计算出的位置值为粘性的元素。 将其视为相对位置，直到其包含的块超过其流根（或滚动其中的容器）内的指定阈值（例如，将top设置为auto以外的值），然后对其进行处理为“卡住” ，直到遇到其包含块的相对边缘。^ref

在您的情况下，您总是遇到另一边。

Answer 2

根据position: sticky上的MDN documentation， top，right，bottom和left属性确定定位元素的最终位置。我的猜测是，为了使其从顶部开始保持不变，它还必须包含top: 0。我添加的代码片段似乎有效。

.scroll {
  width: 200px;
  height: 200px;
  border: 1px solid;
  overflow: auto;
}

.container {
  width: 600px;
  height: 1000px;
}

.sticky-left {
  position: sticky;
  left: 0;
  top: 0; // Add this so it sticks to top
}

.sticky-top {
  position: sticky;
  top: 0;
}

<div class="scroll">
  <div class="sticky-top">sticky-top</div>
  <div class="sticky-left">sticky-left</div>
  <div class="container">
    <div class="sticky-top">sticky-top-nested</div>
    <div class="sticky-left">sticky-left-nested</div>
  </div>
</div>

左为零的嵌套粘性元素不粘性

2 个答案: