title: Owl carousel item content z-index
body: <p>I have a issue with setting z-index of owl carousel <code>item</code> content over fixed overlay. </p>
  
  <p>Every carousel item has background image and text content.</p>
  
  <p>Fixed overlay should be over item (background image), but not over item content.</p>
  
  <p>Fixed overlay cant be part of carousel item, it has to stay static when slides are changing.</p>
  
  <p><strong>What i have:</strong><a href="https://i.stack.imgur.com/4zSNo.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/4zSNo.png" alt="enter image description here"></a></p>
  
  <p><strong>What i want:</strong><a href="https://i.stack.imgur.com/FYaXI.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/FYaXI.png" alt="enter image description here"></a></p>
  
  <p>I tried all different approaches, from various z-index values together with different positioning of all elements, but with no success.</p>
  
  <p><strong>HTML, PHP:</strong></p>
  
  <pre><code>&lt;div class="intro"&gt;
  
      &lt;div class="owl-carousel owl-theme"&gt;
      &lt;?php
      foreach ($Services as $key =&gt; $service) {
          echo '&lt;div class="item ' . $key .'" style="background: url(' . $css_path . $service-&gt;img_mainpage . '"&gt;';
              echo '&lt;div class="hdr_main"&gt;&lt;a href="/' . slug($service-&gt;title) . '"&gt;' . $service-&gt;title . '&lt;/a&gt;&lt;/div&gt;';
              echo '&lt;span class="about"&gt;' . $service-&gt;about . '&lt;/span&gt;';
          echo '&lt;/div&gt;';
      }
      ?&gt;
      &lt;/div&gt;
  
      &lt;div class="fixed-overlay"&gt;
          &lt;?php include(__DIR__ . '/../../assets/gui/mainpage-polygon.svg'); ?&gt;  
      &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>div.intro {
      position: relative;
      height: 100vh;
      background: rgb(0, 121, 201);
  }
  
  div.intro .fixed-overlay {
      position: absolute;
      top: 0px;
      left: 0px;
      height: 100vh;
      width: 60%;
      z-index: 3;
  }
  
  .owl-carousel {
      height: 100vh;
      z-index: 2;
  }
  
  .owl-carousel .item {
      height: 100vh;
      display: flex;
      justify-content: center;
      flex-direction: column;
      text-align: right;
      padding-right: 13%;
      background-repeat: no-repeat !important;
      background-size: cover !important;
      background-position: center center !important;
  }
  
  .item .hdr_main a {
      z-index: 9999;
  }
  </code></pre>
  
  <p>Thank you.</p>