为什么带有position：sticky的元素不会停留在父对象的底部？

Question

我试图了解CSS的“粘性”功能。我可以让它坚持其父级的“顶部”，而不是其“底部”

我的测试代码是：

.block {
  background: pink;
  width: 50%;
  height: 200px;
}

.move {
  position: sticky;
  bottom: 0;
}

1111<br/>11111<br/>11111<br/>11111<br/>11111<br/>11111<br/>11111<br/>
<div class="block">
  AAAA
  <div class="move">
    BBBB
  </div>
</div>
222222<br/>222222<br/>222222<br/>222222<br/>222222<br/>222222<br/>

当我将“ move”设置为“ top：0”时，它停留在粉红色块的顶部，但是当我将其设置为“ bottom：0”时，它似乎不再固定/发粘。

Answer 1

试试下面的代码：

.block {
  background: pink;
  width: 50%;
}

.movetop {
  position: sticky;
  top: 0;
  background: #ccc;
  padding: 10px;
  color: #ae81fe;
  z-index: 1;
  border: 1px solid #777;
}

.movebot {
  background: #ccc;
  padding: 10px;
  color: #ae81fe;
  position: -webkit-sticky;
  position: sticky;
  border: 1px solid #777;
}

.movebot {
  bottom: 0
}

11111<br/>11111<br/>11111<br/>11111<br/>11111<br/>11111<br/>11111<br/>11111<br/>11111<br/>11111<br/>11111<br/>11111<br/>11111<br/>11111<br/>11111<br/>11111<br/>11111<br/>11111<br/>11111<br/>11111<br/>11111<br/>11111<br/>11111<br/>11111<br/>
<div class="block">
  <div class="movetop">
    header
  </div>
  content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>
  <div class="movebot">
    footer
  </div>
</div>
222222<br/>222222<br/>222222<br/>222222<br/>222222<br/>222222<br/>222222<br/>222222<br/>222222<br/>222222<br/>222222<br/>222222<br/>222222<br/>222222<br/>222222<br/>222222<br/>222222<br/>222222<br/>222222<br/>222222<br/>222222<br/>222222<br/>222222<br/>222222<br/>222222<br/>

您可以position:sticky在gedd.ski/post/position-sticky上找到更多信息

Answer 2

一切正常，但您什么也看不到。让我们看一下定义：

粘性放置的元素是其计算的位置值为粘性的元素。它处理为相对定位，直到它的包含块超过指定阈值（例如，设置顶部为比自动其它值）它的流动根内（或容器它内滚动），在该点它被视为“卡住”，直到满足所述其包含块^参考的相对边缘

给图块元素留出较大的空白以将其从屏幕上隐藏起来，然后开始缓慢滚动

.block {
  background: pink;
  width: 50%;
  height: 200px;
  margin-top:120vh;
}

.move {
  position: sticky;
  bottom: 0;
}

<div class="block">
  AAAA
  <div class="move">
    BBBB
  </div>
</div>

您会注意到，当元素显示时，BBB会与重叠，AAA直到到达其初始位置。这是使用时的粘性行为bottom:0。因此，我们的元素得以保留，position:relative并且当容器从顶部的屏幕开始移出时，它会粘在其底部，直到到达相对的边缘（容器的顶部）为止。

完全相同，top:0但方向相反：

.block {
  background: pink;
  width: 50%;
  height: 200px;
  margin-bottom:120vh;
}

.move {
  position: sticky;
  top: 0;
}

<div class="block">
  AAAA
  <div class="move">
    BBBB
  </div>
</div>

因此，粘性不会将元素定位在顶部或底部，而是会决定元素将如何粘贴，以便在容器从屏幕上消失时可见。

为了获得所需的内容，您需要使用其他属性将元素放在底部，并使底部保持粘性。

这是一个示例，其中我使用flexbox将元素放在底部，并指定需要在底部保持粘性。

.block {
  background: pink;
  width: 50%;
  height: 200px;
  margin-top:120vh;
  display:flex;
  flex-direction:column;
}

.move {
  margin-top:auto;
  position: sticky;
  bottom: 0;
}

<div class="block">
  AAAA
  <div class="move">
    BBBB
  </div>
</div>

因此，position:sticky永远不会像我们使用absolute或那样定义元素的位置，fixed但是它将定义在发生滚动行为时元素如何卡住。

这里有更多示例可以更好地理解：

.block {
  background: pink;
  display:inline-flex;
  vertical-align:top;
  height: 200px;
  max-width:100px;
  flex-direction:column;
  margin:100vh 0;
}

.e1 {
  position: sticky;
  top: 0;
}
.e2 {
  margin-top:auto;
  position: sticky;
  top: 0;
}
.e3 {
  position: sticky;
  top: 20px;
}
.e4 {
  position: sticky;
  bottom: 0;
  margin:auto;
}
.e5 {
  position: sticky;
  bottom: 0;
  top:0;
  margin:auto;
}
.e5 {
  position: sticky;
  bottom: 0;
}

<div class="block">
  <div class="e1">Top sticky</div>
</div>
<div class="block">
  <div class="e2">Top sticky at bottom (nothing will happen :( )</div>
</div>
<div class="block">
  <div class="e3">Top sticky at 10px</div>
</div>
<div class="block">
  <div class="e4">bottom sticky in the middle</div>
</div>
<div class="block">
  <div class="e5">top/bottom sticky in the middle</div>
</div>
<div class="block">
  <div class="e6">bottom sticky at the top (nothing will happen :( )</div>
</div>

粘性的另一个常见错误是忘记了元素相对于其父元素的高度/宽度。如果element的高度等于父对象（包含块）的高度，那么在逻辑上将不会有任何粘滞行为，因为我们已经在相反的边缘了。

.block {
  background: pink;
  display:inline-flex;
  vertical-align:top;
  height: 200px;
  max-width:100px;
  flex-direction:column;
  margin:100vh 0;
}

.block > div {
  border:2px solid;
} 
.e1 {
  position: sticky;
  top: 0;
}

<div class="block">
  <div class="e1">Top sticky</div>
</div>
<div class="block">
  <div class="e1" style="height:100%">I will not stick</div>
</div>
<div class="block">
  <div class="e1" style="height:80%">I will stick a little ..</div>
</div>
<div class="block" style="height:auto">
  <div class="e1">I will not stick too</div>
</div>

请注意最后一种情况，将父级的高度设置为auto（默认值），因此其高度将由其内容定义，该值使粘滞元素的高度与包含块的高度相同，并且不会发生任何事情，因为没有空间对于粘性行为。