为什么底部:0 不适用于位置:粘性?
[英] Why bottom:0 doesn't work with position:sticky?
本文介绍了为什么底部:0 不适用于位置:粘性?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想了解 css sticky" 的作用.我可以让它粘在它的父母的顶部"，但不是底部"
我的测试代码是:
.block {背景:粉红色；宽度:50%；高度:200px；}.移动 {位置:粘性；底部:0；}
1111<br/>11111<br/>11111<br/>11111<br/>11111<br/>;11111
11111
<div class="block">美国AAA<div class="移动">BBBB
222222
222222
222222
222222
222222
222222
当我将移动"设置为顶部:0"时，它会粘在粉红色块的顶部，但是当设置为底部:0"时，它似乎不再固定/粘性.
解决方案
它工作正常，但你什么也看不到.我们来看看定义:
<块引用>
粘性定位元素是指计算出的位置值为粘性的元素.它被视为相对定位，直到它的包含块在其流根(或其滚动的容器)内超过指定的阈值(例如将 top 设置为 auto 以外的值)，此时它被处理作为卡住"直到遇到其包含块的相对边缘ref
给块元素一个很大的边距以将其隐藏在屏幕上然后开始缓慢滚动
.block {背景:粉红色；宽度:50%；高度:200px；边距顶部:120vh；}.移动 {位置:粘性；底部:0；}
美国AAA<div class="移动">BBBB
您会注意到，当您的元素显示 BBB 时，它会与 AAA 重叠，直到它到达其初始位置.这是使用 bottom:0 时的粘性行为.所以我们的元素保持 position:relative 并且当容器开始从顶部的屏幕出来时，它会粘在底部直到它到达相对的边缘(容器的顶部).
与 top:0 完全相同，但方向相反:
.block {背景:粉红色；宽度:50%；高度:200px；边距底部:120vh；}.移动 {位置:粘性；顶部:0；}
美国AAA<div class="移动">BBBB
So Sticky 不会将元素定位到顶部或底部，但它会决定元素应该如何粘贴，以便在容器开始移出屏幕时可见.>
为了获得您想要的东西，您需要使用其他属性将元素放在底部并保持底部粘性.
这是一个示例，我使用 flexbox 将元素放在底部，并指定我需要它在底部保持粘性.
.block {背景:粉红色；宽度:50%；高度:200px；边距顶部:120vh；显示:弹性；弹性方向:列；}.移动 {边距顶部:自动；位置:粘性；底部:0；}
美国AAA<div class="移动">BBBB
所以 position:sticky 永远不会像我们对 absolute 或 fixed 那样定义元素的位置，但它会定义元素如何有滚动行为时会粘住.
这里有更多例子可以更好地理解:
.block {背景:粉红色；显示:inline-flex；垂直对齐:顶部；高度:200px；最大宽度:100px；弹性方向:列；余量:100vh 0;}.e1 {位置:粘性；顶部:0；}.e2 {边距顶部:自动；位置:粘性；顶部:0；}.e3 {位置:粘性；顶部:20px；}.e4 {位置:粘性；底部:0；保证金:自动；}.e5 {位置:粘性；底部:0；顶部:0；保证金:自动；}.e5 {位置:粘性；底部:0；}
<div class="e1">顶部粘性</div>
<div class="block"><div class="e2">顶部粘在底部(什么都不会发生:()</div>
<div class="block"><div class="e3">顶部粘性为 10px</div>
<div class="block"><div class="e4">底部粘在中间</div>
<div class="block"><div class="e5">顶部/底部粘在中间</div>
<div class="block"><div class="e6">底部粘在顶部(什么都不会发生:()</div>
sticky 的另一个常见错误是忘记了元素相对于其父元素的高度/宽度.如果元素的高度等于父元素(包含块)的高度，那么逻辑上不会有粘性行为，因为我们已经在相反的边缘.
.block {背景:粉红色；显示:inline-flex；垂直对齐:顶部；高度:200px；最大宽度:100px；弹性方向:列；余量:100vh 0;}.block >div {边框:2px 实心；}.e1 {位置:粘性；顶部:0；}
<div class="e1">顶部粘性</div>
<div class="block"><div class="e1" style="height:100%">我不会粘</div>
<div class="block"><div class="e1" style="height:80%">我会坚持一点..</div>
<div class="block" style="height:auto"><div class="e1">我也不贴了</div>
注意最后一种情况，父元素的高度设置为 auto(默认值)，因此它的高度将由它的内容定义，这使得粘性元素与包含的元素具有相同的高度阻止，什么也不会发生，因为没有粘性行为的余地.
I'm trying to understand what css "sticky" does.
I can get it to stick to the 'top' of its parent,
but not to the 'bottom'
My test code is:
.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/>
When I have "move" set to 'top:0' it sticks to the top of the pink block, but when set to 'bottom:0' it seems no longer fixed/sticky.
解决方案
It's working fine but you will see nothing. Let's have a look at the definition:
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 blockref
Give a big margin to the block element to hide it from the screen then start scrolling slowly
.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>
You will notice that when your element is showing the BBB is overlapping the AAA until it reach its initial place. This is the sticky behavior when using bottom:0. So our element is kept position:relative and when the container start going out from the screen on the top, it become sticky to its bottom until it reach the opposite edge (the top of the container).
Exactly the same happen with top:0 but in the opposite direction:
.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>
So sticky will not position the element to the top or the bottom but it will decide how the element shoul stick in order to be visible when the container will start moving out of the screen.
In order to obtain what you want you need to put your element in the bottom using other properties and keep it bottom sticky.
Here is an example where I place the element at the bottom using flexbox and I specify that I need it to be sticky at the bottom.
.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>
So position:sticky will never define the position of the element like we do with absolute or fixed but it will define how the element will stick when there is a scrolling behavior.
Here more examples to better understand:
.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>
Another common mistake with sticky is to forget about the height/width of the element relatively to the one of its parent. If the height of element is equal to the height of the parent (containing block) then logically there will be no sticky behavior because we are already at the opposite edge.
.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>
Notice the last case where the height of the parent is set to auto (default value) thus its height will be defined by its content which make the sticky element to have the same height as the containing block and nothing will happen because there is no room for a sticky behavior.
这篇关于为什么底部:0 不适用于位置:粘性?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
