Question

我希望在bxslider上放置导航div图层。我已经完成了通常的margin-top技巧，带有负值和z-index：9999以保持导航位于滑块顶部，但它仍然在滑块下方消失。有没有办法把它放在顶部？

这是我现有的CSS代码：

    .navigation {
    width:100%;
    margin-left:26px;
    margin-top:-75px;
    z-index:9999;
}
.navigationTab {
    background-color:#efefef;
    -webkit-border-top-left-radius: 2px;
    -webkit-border-top-right-radius: 2px;
    -moz-border-radius-topleft: 2px;
    -moz-border-radius-topright: 2px;
    border-top-left-radius: 2px;
    border-top-right-radius: 2px;
    display:inline-block;   
    padding-left:3px;
    font-size:10px;
    color:#212121;
    text-transform:uppercase;
    height:31px;
    line-height:31px;
    z-index:9999;
}

.navigationTabRight {
    background:url(images/tabRight.png) no-repeat bottom;
    width:20px;
    display:inline-block;
    margin-right:8px;
    margin-left:-5px;   
    height:26px;
    z-index:9999;
}

HTML：

<div class="slider">
            <ul class="bxslider">
                <li><img src="images/HomeBanners/1.jpg" /></li>
                <li><img src="images/HomeBanners/2.jpg" /></li>
            </ul>
        </div>
        <div class="navigation">
            <div class="navigationTab">Home</div> <div class="navigationTabRight">&nbsp;</div>
        </div>

Answer 1

如果没有定位元素，则不能使用z-index（默认情况下除静态），因此只需添加position: relative;即可启用z-index，您应该会看到预期的结果。现在没有任何元素被定位，所以z-index不起作用。

http://www.w3.org/TR/CSS2/visuren.html#z-index

Answer 2

.slider {
    position:relative;
    z-index:1;   
} 

.navigation {
    position: relative;   
    width:100%;
    margin-left:26px;
    margin-top:-75px;
    z-index:9999;
}

.navigationTab {
    background-color:#efefef;
    -webkit-border-top-left-radius: 2px;
    -webkit-border-top-right-radius: 2px;
    -moz-border-radius-topleft: 2px;
    -moz-border-radius-topright: 2px;
    border-top-left-radius: 2px;
    border-top-right-radius: 2px;
    display:inline-block;   
    padding-left:3px;
    font-size:10px;
    color:#212121;
    text-transform:uppercase;
    height:31px;
    line-height:31px;
    z-index:9999;
}


.navigationTabRight {
    background:url(images/tabRight.png) no-repeat bottom;
    width:20px;
    display:inline-block;
    margin-right:8px;
    margin-left:-5px;   
    height:26px;
    z-index:9999;
}

良好做法是使用<li>或<nav>标记来创建菜单或导航。工作代码的演示在这里：http://jsfiddle.net/B3jZ5/1/

Answer 3

为导航中的所有元素设置z-index将修复它

.navigation * {
    z-index:9999;
}

将导航Div放在bxSlider之上

3 个答案: