Question

我使用猫头鹰旋转木马，我想要幻灯片上方的导航，以便轻松导航。现在它们隐藏在滑块下方或下方。我不知道怎么把它们放在上面。我在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%);
}

如果它看起来不如您所愿，您可能想要调整它。我在评论中尝试了你的例子，这看起来很棒。

<强>更新

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

#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/

猫头鹰旋转木马导航隐藏

1 个答案: