title: Can make z-index work as it should even dough they are position absolute
body: <p>So I have 2 elements, the doted circles that should be z-index: -999; so they are 100% in the background and the second element a login form that should be z-index 999. But even dough they are position absolute the z-index doesn't seem to take effect. Since I'm using flask I tried joining the files instead of having flask load the circles.html to the login.html but still doesn't work.</p>
  
  <p>Image with the problem:
  <a href="https://i.stack.imgur.com/qEsGZ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/qEsGZ.png" alt="enter image description here"></a></p>
  
  <p>The Login CSS:</p>
  
  <pre><code>.login-div{
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.2);
      z-index: 999 !important;
  }
  </code></pre>
  
  <p>Circles CSS:
  .circles in the div that has inside the img with the circles.</p>
  
  <pre><code>.circles{
      position: absolute;
      top: 0%;
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: -999 !important;
  }
  </code></pre>
  
  <p>I only have these two divs with z-index so I believe its not a stacking problem but let me know what you think.</p>