左边为零的嵌套粘性元素不粘性答案

【问题标题】：Nested sticky element with zero left does not sticky左边为零的嵌套粘性元素不粘性
【发布时间】：2018-12-25 16:19:09
【问题描述】：

为什么我的带有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>

【问题讨论】：

标签： html css sticky

【解决方案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

在你的情况下，你总是遇到相反的边缘。

【讨论】：

【解决方案2】：

根据position: sticky 上的MDN documentation，顶部、右侧、底部和左侧属性确定定位元素的最终位置。我的猜测是，为了从顶部粘贴它，它还需要包含top: 0。我添加的 sn-p 似乎有效。

.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>

【讨论】：