title: How to position an image in between 2 sections?
body: <p>I am trying to position an image in between two sections with a ratio of 30:70 (top/bottom).</p>
  
  <p>I have tried nesting the image within a parent and giving that 'position: relative' and then giving the image itself 'position: absolute' to no avail..</p>
  
  <p>Thanks!</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>.imageParent {
      position: relative;
  }
  
  .image {
      position: absolute;
      bottom: -30%;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code> &lt;div class="imageParent"&gt;
              &lt;img class ='image' src='./assets/image-2.jpeg' alt='picture of a man sitting down viewing graphs off an iPad'&gt;
      &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>What I <a href="https://gyazo.com/e49ac552e6b9bc8a6876e8908cb10465" rel="nofollow noreferrer">got</a></p>
  
  <p>What I <a href="https://gyazo.com/bdfd4f03f15dbbba1d3bed5f201bf670" rel="nofollow noreferrer">need</a></p>