为什么 bottom：0 不适用于位置：粘性？

Question

我正在努力理解css"stick"的作用。我可以让它粘在它父母的"顶部"，但不能到达"底部">

我的测试代码是：

.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

它工作得很好，但你什么也看不到。让我们看看定义：

粘性定位元素是指其计算的位置值为粘性的元素。它被视为相对定位的，直到它的包含块在它的流根(或它在其中滚动的容器)内越过指定的阈值(例如将top设置为除auto之外的值)；"卡住"；直到遇到其包含块的相对边缘^ref

给块元素一个大的空白以将其隐藏在屏幕上，然后开始缓慢滚动

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

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

.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(默认值)，因此其高度将由其内容定义，这使得粘性元素具有与包含块相同的高度，并且不会发生任何事情，因为没有粘性行为的空间。

Answer 2

尝试以下代码：

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

你可以在gedd.ski/post/position-sticky 上找到更多关于position:sticky的信息