左值零的嵌套粘性元素不粘性 [英] Nested sticky element with zero left does not sticky

问题描述

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

解决方案

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

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

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

---

将元素设置为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以外的值)，然后对其进行处理为卡住" ，直到遇到其包含块的相反边缘为止.

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

解决方案

Let's add some border and we will clearly see what is happening:

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

As you can see, the nested sticky elements are both having their width equal to parent width (since they are block element) so there is no room for the left-sticky to have any sticky behavior¹ since it has width:100% unlike the top one that can still stick because its height is less that the parent height.

For the non-nested elements I think it's clear.

---

Make the element inline-block or reduce the width and you will have a sticky behavior:

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

---

¹ A stickily positioned element is an element whose computed position value is sticky. It's treated as relatively positioned until its containing block crosses a specified threshold (such as setting top to value other than auto) within its flow root (or the container it scrolls within), at which point it is treated as "stuck" until meeting the opposite edge of its containing block.ref

In your case you were always meeting the opposite edge.

这篇关于左值零的嵌套粘性元素不粘性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！