貓頭鷹旋轉木馬項目內容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指數

回答

相關問題