If you specify `bottom: 0` for position: sticky, why is it doing something different from the specs?

Question

This is a question when I read an article on the MDN position property. I thought that there was a clear difference between the behavior of sticky described the

Answer 1

The specs are difficult to understand so here is my attempt to explain them based on MDN. Some definitions first:

• sticky element – an element with position: sticky
• containing block – the parent of sticky element
• flow root – lets just say that it means viewport

A sticky element having position: sticky; top: 100px; is positioned as follows:

• It is positioned according to the normal flow
• And its top edge will maintain a distance of at least 100px from the top edge of the flow root
• And its bottom edge cannot go below the bottom edge of the containing block

The following example shows how these rules operate:

body { font: medium sans-serif; text-align: center; }
body::after { content: ""; position: fixed; top: 100px; left: 0; right: 0; border: 1px solid #F00; }
header, footer { height: 75vh; background-color: #EEE; }
.containing-block { border-bottom: 2px solid #FA0; background: #DEF; }
.containing-block::after { content: ""; display: block; height: 100vh; }
.before-sticky { border-bottom: 2px solid #080; padding-top: 50px; }
.after-sticky { border-top: 2px solid #080; padding-bottom: 50px; }
.sticky { position: sticky; top: 100px; padding-top: 20px; padding-bottom: 20px; background-color: #CCC; }

header

  
content before sticky
  
top sticky
  
content after sticky

footer

Likewise, a sticky element having position: sticky; bottom: 100px; is positioned as follows:

• It is positioned according to the normal flow
• And its bottom edge will maintain a distance of at least 100px from the bottom edge of the flow root
• And its top edge cannot go above the top edge of the containing block

body { font: medium sans-serif; text-align: center; }
body::after { content: ""; position: fixed; bottom: 100px; left: 0; right: 0; border: 1px solid #F00; }
header, footer { height: 75vh; background-color: #EEE; }
.containing-block { border-top: 2px solid #FA0; background: #DEF; }
.containing-block::before { content: ""; display: block; height: 100vh; }
.before-sticky { border-bottom: 2px solid #080; padding-top: 50px; }
.after-sticky { border-top: 2px solid #080; padding-bottom: 50px; }
.sticky { position: sticky; bottom: 100px; padding-top: 20px; padding-bottom: 20px; background-color: #CCC; }

header

  
content before sticky
  
bottom sticky
  
content after sticky

footer

I hope this is simple enough explanation.