title: how to place an element on top of existing container using css-grid
body: <p>I have a page with a grid container which
  I want to add a parent element (cookie consent element)
  between buttom of component two and footer
  like in the added screenshot
  which is not affected by the grid layout
  <br /></p>
  <p>considering this similar question and answer
  <a href="https://stackoverflow.com/a/37897349/14725238">Moving element outside of grid system</a></p>
  <p>which suggest to use <code>position: absolute</code></p>
  <pre><code>  .cookie-consent {
      position: absolute;
      background: red;
      width: 300px;
      height: 200px;
      /* top: 300px;
      left: 30px;
       bottom: 100px; */
      
      z-index: 20;
    }
  
  </code></pre>
  <p>is there a better way to place the div
  without using trial and error  <code>top</code> , <code>left</code> , <code>right</code> parameters til the desired position is reached ?</p>
  <p><a href="https://i.stack.imgur.com/mV7XL.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/mV7XL.png" alt="element on top of grid layout" /></a></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>:root {
     
      padding-left: 10%;
      padding-right: 10%;
    }
    
  
    .container {
      display: grid;
      height: 100vh;
      margin: auto;
      max-width: 80%;
      grid-template-columns: 1fr 1fr 1fr 1fr;
      grid-template-rows: 0.2fr 1.2fr 1.8fr 0.3fr;
      grid-template-areas:
        "nav nav nav nav"
        "component1 component1 component1 component1"
        "component2 component2 component2 component2"
        "footer footer footer footer";
      grid-gap: 0.5rem;
      font-weight: 800;
      text-transform: uppercase;
    
      text-align: center;
    }
    
  
  
    nav {
      text-align: center;
      background: #a7ffeb;
      grid-area: nav;
      border-radius: var(--main-radius);
      padding-top: var(--main-padding);
    }
    
  
  
    
    #component1 {
      background: #6fffd2;
      grid-area: component1;
      border-radius: var(--main-radius);
      padding-top: var(--main-padding);
    }
    
    #component2 {
      background: #64ffda;
      grid-area: component2;
      border-radius: var(--main-radius);
      padding-top: var(--main-padding);
    }
    
  
  
  
  
    
    footer {
      background: #1de9b6;
      grid-area: footer;
      border-radius: var(--main-radius);
      padding-top: var(--main-padding);
    }
    
    .cookie-consent {
      position: absolute;
      background: red;
      width: 100px;
      height: 80px;
      /* top: 300px;
      left: 30px;
       bottom: 100px; */
      
      z-index: 20;
    }
  
    /* place the element cookie on top of the gird layout */
    /*  */</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
    &lt;head&gt;
      &lt;meta charset="UTF-8" /&gt;
      &lt;meta http-equiv="X-UA-Compatible" content="IE=edge" /&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0" /&gt;
      &lt;!-- add style css to page --&gt;
      &lt;link rel="stylesheet" href="./style.css" /&gt;
  
      &lt;title&gt;Document&lt;/title&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;div class="cookie-consent"&gt;cookies&lt;/div&gt;
      &lt;div class="container"&gt;
        &lt;nav&gt;Navbar&lt;/nav&gt;
        &lt;div id="component1"&gt;component1&lt;/div&gt;
        &lt;div id="component2"&gt;component2&lt;/div&gt;
      
        &lt;footer&gt;Footer&lt;/footer&gt;
      &lt;/div&gt;
      
    &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>