在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

回答

相關問題