title: Why does positioning child as absolute to its relevant parent push it outside of the parent div?
body: <p>I am trying to move the image around inside of the parent div using position absolute on the image and position relative on the parent but when I do so it pushes it outside of the parent div. Below is the html/css</p>
  
  <pre><code>&lt;div class="work"&gt;
      &lt;h2 class='workHeader'&gt;work&lt;/h2&gt;
      &lt;div class="container"&gt;
          &lt;div class="aboutProject"&gt;
              &lt;h3 class="projectTitle"&gt;Peak Choice&lt;/h3&gt;
              &lt;p class="projectDescription"&gt;
                  Peak Choice provides real-time data to make choosing where your next Colorado Ski trip easier.
              &lt;/p&gt;
          &lt;/div&gt;
          &lt;div class="projectImageSection"&gt;
                  &lt;img class='peakChoiceImage' src="/img/peakchoicemockup.png"&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  .work {
  /*position: absolute;*/
  text-align: center;
  width: 100%;
  }
  .workHeader {
      margin-top: 1rem;
      margin-bottom: 2rem;
  }
  .container {
      display: grid;
      grid-gap: 3px;
      grid-template-columns: repeat(2, 1fr);
      grid-template-rows: repeat(auto);
      grid-template-areas:
          "c i"
          "c i";
  }
  .projectImageSection {
      /*background-color:#ABECF0;*/
      position: relative;
      /*overflow: hidden;*/
  
  }
  .peakChoiceImage {
      position: absolute;
      height: auto;
      width: 25rem;
  }
  </code></pre>