猫头鹰轮播导航隐藏

Question

我使用 owl carousel，我想要幻灯片上方的导航以便轻松导航。现在它们被隐藏或在滑块下方。我不知道如何将它们放在上面。我在CSS 中尝试了 z-index 用于轮播和导航，但没有任何反应。需要帮助，谢谢！

JS

<script>
 $(document).ready(function() {
    $("#owl-demo2").owlCarousel({
        navigation : true, // Show next and prev buttons
        slideSpeed : 300,
        paginationSpeed : 400,
        items : 1,
        itemsDesktop : false,
        itemsDesktopSmall : false,
        itemsTablet: false,
        itemsMobile : false
        });

  });
</script>

CSS

    #owl-demo2 .item img{
    display: block;
    width: 100%;
    height: auto;
    position: relative;
    z-index: 1;
    }
    .owl-theme .owl-controls .owl-buttons div{
    color: #FFF;
    display: inline-block;
    zoom: 1;
    position: fixed;
    z-index: 2000;
    *display: inline;/*IE7 life-saver */
    margin: 90px;
    padding: 20px 0px;
    font-size: 12px;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 30px;
    background: #869791;
    filter: Alpha(Opacity=50);/*IE7 fix*/
    opacity: 0.5;
}
.owl-buttons {
    position: absolute !important;
    top: -45px !important;
    left: 50% !important;
    transform: translateX(-50%)!important;
}

Answer 1

z-index 不会像您希望的那样放置项目。我认为您需要更改这些按钮的位置，而不是设置不同的z-index。

这里有一个 z-index 如何工作的示例。根据需要更改 z-index 并检查对齐在这些框上的工作方式：

https://jsfiddle.net/grmcfb7z/

你可以试试这个 CSS 来解决你的问题：

.owl-buttons{
    position: absolute;
    top: -45px;
    left: 50%;
    transform: translateX(-50%);
}

如果它看起来不像您希望的那样，您可能需要对其进行调整。我在你的 cmets 示例上进行了尝试，它对我来说看起来很棒。

更新

在深入研究了确切的问题之后，这里是完整的解决方案：

#owl-demo2 .item img {
    display: block;
    width: 100%;
    height: auto; //we don't need position or z-index property here
}

.owl-theme .owl-controls .owl-buttons div {
    color: #FFF;
    display: inline-block;
    zoom: 1;
    *display: inline; /*IE7 life-saver */
    margin: 10px; //fixed margin to not mess our buttons alignement
    padding: 5px 15px; //smaller padding for better look
    font-size: 12px;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 30px;
    background: #869791;
    filter: Alpha(Opacity=50); /*IE7 fix*/
    opacity: 0.5;
}

.owl-buttons, .owl-pagination {
    position: absolute !important;
    left: 50% !important;
    transform: translateX(-50%) !important; //here we override our buttons
                                            //positions
}

.owl-buttons {
    top: 0 !important; //nav position
}

.owl-pagination {
    bottom: 0 !important; //pagination position
}

工作 jsfiddle：https://jsfiddle.net/43wo7g98/3/