1

为什么我的嵌套粘性元素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>

4

2 回答 2

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>

如您所见，嵌套的粘性元素的宽度都等于父元素的宽度（因为它们是块元素），因此左粘性元素没有任何粘性行为1的空间，因为它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>

1粘性定位元素是其计算的位置值是粘性的元素。它被视为相对定位，直到其包含块在其流根（或其滚动的容器）内超过指定阈值（例如将 top 设置为 auto 以外的值），此时它被视为“卡住”，直到满足其包含块的相对边缘。参考

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

于 2018-12-25T18:55:16.833 回答
-3

根据MDN 文档，顶部position: sticky、右侧、底部和左侧属性确定定位元素的最终位置。我的猜测是，为了从顶部粘贴它，它还需要包含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>

于 2018-12-25T17:18:09.683 回答