1

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

这是我现有的 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>
4

3 回答 3

2

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

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

于 2013-04-16T23:09:00.490 回答
0

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

.navigation * {
    z-index:9999;
}
于 2013-11-15T07:50:06.097 回答
0 
.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/

于 2013-04-18T16:56:22.017 回答