将导航Div放在bxSlider之上

时间:2013-04-16 23:07:21

标签: html css

我希望在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>

3 个答案:

答案 0 :(得分:2)

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

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

答案 1 :(得分: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/

答案 2 :(得分:0)

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

.navigation * {
    z-index:9999;
}