title: position div over another to keep it same on all devices
body: <p>I am trying to make a div position a little above my other divs. The plate and cake-lower div are exactly in middle of the page so they are fine, but the cake-top div needs to be 40-50px above the middle of the page. I am able to achieve this by changing the margin attribute, but this is only for my device. Which properties should be modified in the css to make this design responsive across all screen sizes?</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>body{
          background-color: plum;
      }
      .container{
          border: 2px solid black;
          left: 0;
          right: 0;
          top: 0;
          bottom: 0;
          margin: auto;
          position: absolute;
      }
      .cake-lower{
          border: 1px solid #654321;
          background-color : #654321;
          height: 100px;
          width: 100px;
          left: 0;
          right: 0;
          top: 0;
          bottom: 0;
          margin: auto;
          position: absolute;
          border-top-left-radius: 20%;
          border-top-right-radius: 20%;
          border-bottom-right-radius: 20%;
          border-bottom-left-radius: 20%;
      }
      .cake-top{
          width: 100px;
          height: 50px;
          background:#9f6934;
          border-radius: 50px / 25px;
          left: 0;
          right: 0;
          top: 0;
          bottom: 70px;
          margin: auto;
          position: absolute;
      
      }
      .plate{
          width: 250px;
          height: 125px;
          background:white;
          border-radius: 125px / 64px;
          left: 0;
          right: 0;
          top: 0;
          bottom: 0;
          margin: auto;
          position: absolute;
      }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>        &lt;div class="container"&gt;
              &lt;div class="plate" &gt;&lt;/div&gt;
              &lt;div class="cake-lower"&gt;&lt;/div&gt;
              &lt;div class="cake-top" &gt;&lt;/div&gt;
          &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>