Owl carrousel élément contenu z-index

Question

J'ai un problème avec le réglage de z-index de owl carrousel item contenu sur overlay fixe.

Chaque élément du carrousel a une image d'arrière-plan et un contenu textuel.

La superposition fixe doit être sur l'élément (image de fond), mais pas sur le contenu de l'élément.

Le recouvrement fixe ne peut faire partie d'un élément de carrousel, il doit rester statique lorsque les glissières changent.

Ce que je:

Ce que je veux:

J'ai essayé toutes les approches différentes, à partir de différentes valeurs z-index avec un positionnement différent de tous les éléments, mais sans succès .

HTML, PHP:

<div class="intro"> 

    <div class="owl-carousel owl-theme"> 
    <?php 
    foreach ($Services as $key => $service) { 
     echo '<div class="item ' . $key .'" style="background: url(' . $css_path . $service->img_mainpage . '">'; 
      echo '<div class="hdr_main"><a href="/' . slug($service->title) . '">' . $service->title . '</a></div>'; 
      echo '<span class="about">' . $service->about . '</span>'; 
     echo '</div>'; 
    } 
    ?> 
    </div> 

    <div class="fixed-overlay"> 
     <?php include(__DIR__ . '/../../assets/gui/mainpage-polygon.svg'); ?> 
    </div> 

</div> 

CSS:

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; 
} 

Merci.

Answer 1

Essayez appliquer le format juste .item classe

.item { 
    z-index: 9999; 
}