猫头鹰旋转木马项目内容Z指数

我有一个问题，设置固定覆盖的猫头鹰旋转木马item内容z-index。猫头鹰旋转木马项目内容Z指数

每个轮播物品都有背景图片和文字内容。

固定重叠应该超过项目（背景图像），但不超过项目内容。

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

我有：

我想要什么：

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

谢谢。

来源

2017-05-31 Daniel Lagiň

能否请您分享的CSS/HTML代码？ –

@CarlosMartins完成 –

尝试应用的格式只是.item类

.item { 
    z-index: 9999; 
}

来源

2017-05-31 07:59:02

你好，谢谢你的回答，但它不会工作，我已经尝试过了。 '.owl-carousel'具有z-index，它会覆盖item和它的内容的z-index。而且我还需要将.item置于'.fixed-overlay'下。 –

仅当容器也被标记为position：relative/absolute时才应用z-index。如果在您尝试使用顶层的元素中不可行，则应该在Z-index较低的其他元素中执行此操作。 –

我绑定在旋转木马内的所有元素的位置和不同的z-索引值操作，但仍然没有成功。 –

猫头鹰旋转木马项目内容Z指数

回答

相关问题