css - Why bottom:0 doesn't work with position:sticky?

Question

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

Answer 1

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 block^ref

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>