title: If you specify `bottom: 0` for position: sticky, why is it doing something different from the specs?
body: <p>This is a question when I read an article on the MDN <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/position" rel="nofollow noreferrer"><code>position</code> property</a>. I thought that there was a clear difference between the behavior of <code>sticky</code> described there and the actual behavior.</p>
  <hr />
  <p>According to the MDN, sticky position elements are treated as relative position elements until the specified threshold is exceeded, and when the threshold is exceeded, they are treated as fixed position elements until the boundary of the parent element is reached (<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/position#Sticky_positioning" rel="nofollow noreferrer">Link</a>).</p>
  <blockquote>
  <p>Sticky positioning can be thought of as a hybrid of relative and fixed positioning. A stickily positioned element is treated as relatively positioned until it crosses a specified threshold, at which point it is treated as fixed until it reaches the boundary of its parent. For instance...</p>
  <pre><code>#one { position: sticky; top: 10px; } 
  </code></pre>
  <p>...would position the element with id one relatively until the viewport were scrolled such that the element would be less than 10 pixels from the top. Beyond that threshold, the element would be fixed to 10 pixels from the top.</p>
  </blockquote>
  <p>So, I created the following code and confirmed the operation.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    margin: 0;
  }
  
  .container {
    display: flex;
    flex-direction: column;
  }
  
  .container&gt;* {
    width: 100%;
  }
  
  header {
    background: #ffa;
    height: 130vh;
  }
  
  main {
    background: #faf;
    height: 210vh;
  }
  
  footer {
    background: #faa;
    height: 8vh;
    position: sticky;
    bottom: 0;
  }
  
  .footer {
    background: #aff;
    height: 100vh;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container"&gt;
    &lt;header&gt;HEADER&lt;/header&gt;
    &lt;main&gt;MAIN CONTENT&lt;/main&gt;
    &lt;footer&gt;FOOTER&lt;/footer&gt;
    &lt;div class="footer"&gt;&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>According to the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/position#Sticky_positioning" rel="nofollow noreferrer">MDN article</a>, this code &quot;is a relative placement element until the position of the element is less than 0px from the bottom of the viewport by scrolling the viewport, and becomes a fixed placement element when it is more than 0px from the bottom&quot; I was thinking.</p>
  <p>However, the result is the action of &quot;Scroll to the fixed position element until the position of the element becomes smaller than 0px from the lower end of the viewport by scrolling the viewport, and become the relative arranged element when larger than 0px from the lower end&quot;.</p>
  <hr />
  <p>Why does specifying the <code>bottom:0</code> result in the opposite of the behavior shown in MDN?</p>
  <p>When <code>top: 0</code> is specified, the relative position is applied when the element does not reach <code>bottom: 0</code> of the viewport, and when it reaches, fixed position is applied. When <code>bottom: 0</code> is specified, the opposite is true. The relative position is applied when the element does not reach the <code>bottom: 0</code> of the viewport, the fixed position is applied when it is reached</p>
  <p>I read <a href="https://drafts.csswg.org/css-position-3/#sticky-pos" rel="nofollow noreferrer">CSS3</a> but its mechanism was difficult to read</p>