猫头鹰走马灯项目内容z轴序号

Question

我有一个问题，无法设置owl carousel的item内容的z-index覆盖固定叠加层。

每个carousel item都有背景图像和文本内容。

固定叠加层应该覆盖item（背景图像），但不应覆盖item内容。

固定叠加层不能成为carousel item的一部分，它必须在幻灯片更改时保持静态。

我拥有的:

我想要的:

我尝试了各种不同的方法，包括不同位置的所有元素以及不同的z-index值，但都没有成功。

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

谢谢。

- Daniel Lagiň

---

请问您能分享一下 CSS/HTML 代码吗？ - CMartins

@CarlosMartins 完成 - Daniel Lagiň

Answer 1

.item {
    z-index: 1;
}

.owl-carousel {
    z-index: -1;
}

试试这个

- Sathees karan

---

这个可以运行，但是Owl Carousel停止工作了。 - Aashish Kumar

Answer 2

通过使用 z-index 属性，您还需要设置相应的 position: relative 或 absolute 属性。尝试将这些属性设置到包含猫头鹰走马灯的父级 div 上。我也曾遇到过这种情况。

- sam

Answer 3

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

.item {
    z-index: 9999;
}

- CMartins

---

你好，感谢你的回答，但是它不起作用，我已经尝试过了。.owl-carousel有z-index并且会覆盖item及其内容的z-index。而且我还需要.item在.fixed-overlay下面。 - Daniel Lagiň

只有在容器也被标记为position: relative/absolute时，z-index才会被应用。如果在您尝试置于顶部的元素中不可能实现，则应在具有较低z-index的其他元素中执行此操作。 - CMartins

我尝试过使用不同的z-index值来操纵旋转木马内所有元素的位置，但仍然没有成功。 - Daniel Lagiň

不确定当您说“没有成功”时发生了什么。 覆盖 .fixed-overlay {z-index: 3 !important;} 怎么样？ - CMartins