title: How to use CSS Top with it's parent element, rather than it's value relative to the document
body: <p>I'm making a single page website for a friend and I'm currently working on the about age. I have this design idea to have square <code>divs</code> to be layered on top of one another using different <code>left</code>/<code>right</code>/<code>top</code>/<code>bottom</code> values. But whenever I set the <code>top</code> or <code>bottom</code> values, their new position is relative to the entire document, rather than it's immediate parent div (<code>.about-container</code>). How can I make sure that the square divs and their <code>top</code>/<code>bottom</code> values are relative to their parent container, rather than the entire document? </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>html, body {
     margin: 0;
     padding: 0;
  }
  
  div {
   display: block;
  }
  
  nav ul, nav ol {
      list-style: none;
      list-style-image: none;
      margin: 0;
      padding: 0;
  }
  
  a {
   text-decoration: none;
   color: inherit; 
  }
  
  #body {
   visibility: visible;
   max-width: 1300px;
      margin: 5px auto;
  }
  
  #desktop-navbar {
   text-transform: uppercase;
   width: 100%;
   height: 60px;
   position: fixed;
   z-index:1;
  }
  
  #desktop-logo{
   float: left;
  }
  
  .logo {
   font-size: 42px;
   font-weight: 300;
   text-transform: uppercase;
   color: #ffffff;
   margin-top: 20px;
   font-family: Thasadith;
   font-weight: 700;
  } 
  
  #desktop-nav-wrapper {
   height: 90px;
   padding: 0 45px;
   margin-top: 0;
  }
  
  #desktop-nav-wrapper nav ul {
   float: right;
   padding-top: 35px;
   font-size: 16px;
  }
  
  #desktop-nav-wrapper nav li {
   position: relative;
   display: inline-block;
   padding-left: 35px;
   color: #ffffff;
   font-family: Thasadith;
   font-weight: 700;
  }
  
  #desktop-nav-wrapper, #mobile-nav-wrapper, #mobile-menu-link {
   font-weight: bold;
   font-size: 18px;
   text-transform: uppercase;
   color: black;
   letter-spacing: 2px;
  }
  
  #home {
   height: 700px;
   background-image: url("https://i.ibb.co/FzFVTMR/Whats-App-Image-2019-03-06-at-13-56-45.jpg");
   background-repeat: no-repeat;
   -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
  }
  
  .container {
   display: flex;
     justify-content: center;
     align-items: center;
     text-align: center;
     min-height: 100vh;
  }
  
  #home-content {
   font-family: Thasadith;
   font-weight: 300;
   font-size: 38px;
   color: #ffffff;
   letter-spacing: 5px;
  }
  
  #about {
   height: 700px;
   background-color: #c96567;
  }
  
  .about-container {
   display: flex;
   position: absolute;
   height: inherit;
  }
  
  #about-div-one {
   height: 50px;
   width: 50px;
   background-color: red;
   left: 25%;
    top: 35%;
  }
  
  #about-div-two {
   height: 50px;
   width: 50px;
   background-color: blue;
   left: 75%; 
    top: 64%;
  }
  
  #about-div-three {
   height: 50px;
   width: 50px;
   background-color: orange;
   left: 74%; 
   top: 65%;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code> &lt;div id="home"&gt;
       &lt;div id="home-content" class="container"&gt;
        &lt;p&gt;tatuando. dibujo. pintura. estilo de vida.&lt;/p&gt;
       &lt;/div&gt;
   &lt;/div&gt;
    
     &lt;div id="about"&gt;
    &lt;div id="about-div-one" class="about-container"&gt;
     
    &lt;/div&gt;
    &lt;div id="about-div-two" class="about-container"&gt;
     
    &lt;/div&gt;
    &lt;div id="about-div-three" class="about-container"&gt;
     
    &lt;/div&gt;
   &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>