Owl Karussell Artikel Inhalt Z-Index

Question

Ich habe ein Problem mit der Einstellung Z-Index von Eulenkarussell item Inhalt über feste Overlay.

Jedes Karussellelement hat Hintergrundbild und Textinhalt.

Fixed Overlay sollte über Artikel (Hintergrundbild), aber nicht über Artikel Inhalt sein.

Feste Überlagerung kann nicht Teil des Karussellelements sein, es muss statisch bleiben, wenn sich die Objektträger ändern.

Was ich:

, was ich will:

Ich habe versucht, alle verschiedenen Ansätze aus verschiedenen z-Indexwerten zusammen mit unterschiedlicher Positionierung aller Elemente, aber ohne Erfolg .

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

Danke.

Answer 1

Versuchen Sie das Format gelten nur .Item Klasse

.item { 
    z-index: 9999; 
}