在bxSlider顶部放置导航Div

我期待在bxslider顶部放置导航div层。我已经完成了margin-top的常用技巧，带有负值和z-index：9999以将导航保持在滑块顶部，但它仍然在滑块下消失。有没有办法将它放在顶部？在bxSlider顶部放置导航Div

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

来源

2013-04-16 Web Develop Wolf

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

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

来源

2013-04-16 23:09:00 Adrift

完美谢谢:) –

.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-18 16:56:22

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

.navigation * { 
    z-index:9999; 
}

来源

2013-11-15 07:50:06

在bxSlider顶部放置导航Div

回答

相关问题