Css Owl转盘项目内容z索引

我在设置owl转盘

项目

内容在固定覆盖上的z索引时遇到问题

每个转盘项目都有背景图像和文本内容

固定覆盖应覆盖项目（背景图像），但不覆盖项目内容

固定覆盖不能是转盘项目的一部分，当幻灯片更改时，它必须保持静态

我所拥有的：

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

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

我想要什么：

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

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

我尝试了所有不同的方法，从不同的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>

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

---

谢谢。

尝试将格式仅应用于.item类

.item {
    z-index: 9999;
}

---

使用

z-index

还需要

位置：相对的
或
绝对的
。尝试将其设置为容纳owl转盘的父级
div
。我也用猫头鹰转盘面对这种情况。

.item{
z指数：1；
}
.猫头鹰转盘{
z指数：-1；
}
你能分享css/html代码吗？@CarlosMartins DoneHello，谢谢你的回答，但它不起作用，我已经试过了
.owl carousel
具有z索引，它覆盖项目及其内容的z索引。而且我还需要.item位于
下。固定覆盖
z-index仅在容器也标记为position:relative/absolute时应用。如果无法在您试图将其置于顶部的元素中执行此操作，则应在z索引较低的其他元素中执行此操作。我尝试使用旋转木马中所有元素的位置和不同的z索引值进行操作，但仍然没有成功。不确定当您说“不成功”时会发生什么。如何覆盖。修复覆盖{z-index:3！重要；}