为什么bottom:0不能与position:sticky一起使用? [英] Why bottom:0 doesn't work with position:sticky?

问题描述

我试图了解CSS粘性"的作用. 我可以让它坚持其父级的最高层"， 而不是底端"

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'

我的测试代码是:

.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"设置为"bottom:0"时，它似乎不再固定/发粘.

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:

粘性定位元素是其计算出的位置值为粘性的元素.在它的流根(或在其中滚动的容器)中，将其相对定位，直到其包含的块超过指定的阈值(例如，将top设置为auto以外的值)，然后对其进行处理作为卡住"直到遇到其包含块的相反边缘 ^参考

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

为block元素提供较大的空白以将其从屏幕上隐藏起来，然后开始缓慢滚动

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>

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

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

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

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.

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

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>

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

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>

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

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>

请注意最后一种情况，即将父级的高度设置为auto(默认值)，因此其高度将由其内容定义，这将使粘滞元素的高度与包含块的高度相同，并且不会发生任何事情因为没有粘性行为的余地.

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.

这篇关于为什么bottom:0不能与position:sticky一起使用?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！