title: Absolute positioning of div without overlapping div above
body: <p>I have a div that I wish to position at the bottom of the webpage. I can achieve this using <code>position:absolute</code>. However, I don't want it to overlap the div above when the window is made smaller. This was achieved by changing it to <code>position:relative</code> however as expected it does not stay on the bottom of the page on bigger screens.</p>
  
  <p>Is there a way in which this is possible?</p>
  
  <p>Current CSS</p>
  
  <pre><code>position:relative; 
  bottom:0; 
  background-image:url('.......'); 
  background-repeat:repeat-x; 
  background-position:bottom;
  width:100%;
  </code></pre>
  
  <p>An example of what I was explaining.</p>
  
  <p><img src="https://i.stack.imgur.com/Sq6v1.png" alt="enter image description here"></p>