在bxSlider的顶部放置一个导航Div

Question

我想在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>

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;
}