title: How to dynamically change position: property in CSS (or JavaScript) when content is near other content
body: <p>OK, so I have some list items on the page inside a ul, and I have a footer sticky-positioned in CSS.</p>
  <p>When the list items reach near the bottom of the page, the footer becomes overlapped with the list items. This is expected but not wanted. What I want is for the footer to become position: relative with no top and left property values set so that the list items keep growing and the footer keeps being pushed further down the page.</p>
  <p>See the attached image:
  <a href="https://i.stack.imgur.com/TFeQ4.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/TFeQ4.png" alt="enter image description here" /></a></p>
  <p>How can I achieve this?</p>
  <pre><code>&lt;section&gt;
    &lt;ul&gt;
      &lt;li&gt;Test&lt;/li&gt;
      &lt;li&gt;Test&lt;/li&gt;
      &lt;li&gt;Test&lt;/li&gt;
      &lt;li&gt;Test&lt;/li&gt;
      &lt;li&gt;Test&lt;/li&gt;
      &lt;li&gt;Test&lt;/li&gt;
      &lt;li&gt;Test&lt;/li&gt;
      &lt;li&gt;Test&lt;/li&gt;
      &lt;li&gt;Test&lt;/li&gt;
      &lt;li&gt;Test&lt;/li&gt;
      &lt;li&gt;Test&lt;/li&gt;
      &lt;li&gt;Test&lt;/li&gt;
      &lt;li&gt;Test&lt;/li&gt;
      &lt;li&gt;Test&lt;/li&gt;
      &lt;li&gt;Test&lt;/li&gt;
      &lt;li&gt;Test&lt;/li&gt;
      &lt;li&gt;Test&lt;/li&gt;
      &lt;li&gt;Test&lt;/li&gt;
      &lt;li&gt;Test&lt;/li&gt;
      &lt;li&gt;Test&lt;/li&gt;
      &lt;li&gt;Test&lt;/li&gt;
      &lt;li&gt;Test&lt;/li&gt;
      &lt;li&gt;Test&lt;/li&gt;
      &lt;li&gt;Test&lt;/li&gt;
      &lt;li&gt;Test&lt;/li&gt;
      &lt;li&gt;Test&lt;/li&gt;
      &lt;li&gt;Test&lt;/li&gt;
      &lt;li&gt;Test&lt;/li&gt;
      &lt;li&gt;Test&lt;/li&gt;
      &lt;li&gt;Test&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/section&gt;
  &lt;footer&gt;
    &lt;p&gt;Hello.&lt;/p&gt;
  &lt;/footer&gt;
  
  footer {
    position: sticky;
    bottom: 0;
  }
  </code></pre>
  <p>I'd prefer to do this without JavaScript, but if I must resort to this...</p>