title: Change/Override z-index of ::after element in CSS
body: <p>What I want to achieve should look something like this:</p>
  
  <p><a href="https://i.stack.imgur.com/aFMt8.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/aFMt8.png" alt="Element on top of image with :after element behind carousel"></a></p>
  
  <p>My CSS looks like this:</p>
  
  <pre><code>.element {
      position: absolute;
      right: 13vw;
      top: 7vw;
      background-color: #016BA9;
      padding: 5px;
      color: #E6EEF8;
      z-index: 1;
  }
  
  .element::after{
      content: "";
      border-top: 100px solid rgb(1, 81, 128);
      border-right: 100px solid transparent;
      bottom: -100px;
      right: 0;
      position: absolute;
      z-index: -1 !important;
  }
  </code></pre>
  
  <p>Now what my problem is:
  If I set the z-index of the .element class to 1 I cannot override it with z-index: -1 in the pseudo-element.<br>
  My workaround was to change the z-index of the carousel to -1, remove the z-index from the element and place a z-index of -2 in the element::after. But then my carousel becomes non-interactable.</p>
  
  <p>Thank you!</p>