重疊導航上的重疊div

Question

我希望徽標div位於導航容器的頂部。我將如何實現這一目標？我一直在玩弄定位，似乎沒有任何工作。它們都在標題容器內。

這裏是我的CSS代碼：

和JS鏈接：

http://jsfiddle.net/4vA93/3/

header { 
position: relative; 
height:100px; 
background-color: yellow; 

} 

.logo { 
position: absolute; 
margin-top:10px; 
margin-left:20px; 
width:80px; 
height:80px; 
background-color: red; 
} 


nav { 
position: absolute; 
width:100%; 
bottom: 0; 
background-color: bisque; 
} 

和HTML

<header> 
    <div id="logo">Logo</div> 
    <nav> 
     <ul> 
      <li><a href="#">| Hours |</a></li> 
      <li><a href="#"> Facilities |</a></li> 
      <li><a href="#"> Restaurant Charlotte |</a></li> 
      <li><a href="#"> Penthouse Suite |</a></li> 
      <li><a href="#"> Gift Shop |</a></li> 

     </ul> 
    </nav> 
</header> 

Answer 1

你的意思是這樣的嗎？ http://jsfiddle.net/4vA93/4/

#logo { 
    z-index:10; 
} 

還是這樣？ http://jsfiddle.net/4vA93/5/