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:

Answer 1

Try the following code:

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


  

    header
  
  content
content
content
content
content
content
content
content
content
content
content
content

  

    footer
  

222222
222222
222222
222222
222222
222222
222222
222222
222222
222222
222222
222222
222222
222222
222222
222222
222222
222222
222222
222222
222222
222222
222222
222222
222222

You can find more about position:sticky on gedd.ski/post/position-sticky

I hope it helps.

Peace.