Как разместить изображение поверх навигатора?

Question

как разместить изображение поверх навигатора, как этот BOOK ONLINE? Мне нужен CSS. https://www.dropbox.com/s/md2teu0ol82o23x/Website.psd

<div class="navbar-inner"> 
    <ul class="nav"> 
    <li><a href="#">Home</a></li> 
    <li><a href="#">About Us</a></li> 
    <li><a href="#">Our Fleet</a></li> 
    <li><a href="#">Booking</a></li> 
    <li><a href="#">Contact Us</a></li> 
    <li><a href="#" id="book_online"></a></li> 
    </ul> 
</div> 
.navbar .nav > li > #book_online { 
background: url(../blabor2.jpg) no-repeat; 
width: 183px; 
height: 64px; 
text-indent: -99999px; 
position: absolute; 
} 

Answer 1

это очень маленький «CSS» код, и я могу только догадываться

a .navbar .nav > li > #book_online { 
    display: block; /* this is new */ 
    background: url(../blabor2.jpg) no-repeat; 
    width: 183px; 
    height: 64px; 
    text-indent: -99999px; 
    /*position: absolute;*//* may be you don't need this */ 
} 

Answer 2

Вы должны определить абсолютную #book_position, который будет относительно ли.
Надеется, что это решит вашу проблему ...

.nav>li{ 
    position:relative; 
    } 

#book_online{ 
     position:absolute; 
     z-index:10; 
    display:block; 
    background: url(../blabor2.jpg) no-repeat; 
    width: 183px; 
    height: 64px; 
     }