フクロウカルーセルアイテムのコンテンツのZインデックス

Question

固定オーバーレイよりもフクロウカルーセルitemのZインデックスを設定する際に問題があります。

すべてのカルーセルアイテムには、背景イメージとテキストコンテンツがあります。

固定オーバーレイはアイテム（背景イメージ）上に配置する必要がありますが、アイテムのコンテンツには配置しないでください。

固定オーバーレイはカルーセルアイテムの一部ではありません。スライドが変更されても固定されている必要があります。

は何私が持っている：私が欲しいもの

：

私は一緒にすべての要素の異なる位置での様々なZインデックス値からすべての異なるアプローチを、試みたが、成功しません。

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

はありがとうございます。

Answer 1

はちょうどクラス

.item { 
    z-index: 9999; 
}