Размещение навигационного Div в верхней части bxSlider

Question

Я ищу, чтобы разместить слой div навигации поверх bxslider. Я сделал обычный трюк 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> 

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-индекса для всех элементов в навигации будет это исправить

.navigation * { 
    z-index:9999; 
}