首页 文章

猫头鹰轮播项目内容z-index

提问于
浏览 次
2

我有一个问题，即在固定叠加层上设置owl carousel item 内容的z-index .

每个轮播项目都有背景图像和文本内容 .

固定叠加应该是项目（背景图像），但不是项目内容 .

固定叠加不能成为轮播项目的一部分，它必须在幻灯片更改时保持静止 .

What i have:
enter image description here

What i want:
enter image description here

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

谢谢 .

css z-index owl-carousel

2 回答

  • 0

    尝试将格式应用于.item类

    .item {
    z-index: 9999;
}
    回复于
  • 0

    使用 z-index ，您还需要 position: relative 或 absolute . 尝试将其设置为包含owl轮播的父级 div . 猫头鹰旋转木马我也遇到过这种情况 .

    回复于

相关问题