位置圖像不會跨越兩個continers

Question

您好我想創建一個個人網站時遇到我的頭，specificaly相關positioning.This一些問題的造型我的頭，現在的樣子是：

的NA在中段實際上是成像圈應該重疊的黑色邊框，但我似乎無法弄清楚如何做it.This是我的標記：

<section class="top-bottom-border overflow"> 
    <div class="center"> 
     <ul id="social"> 
      <li><a href="http://www.facebook.com/nistor.alexandru.89" target="_blank"><img src="images/social/FacebookIco.png"></a></li> 
      <li><a href="https://twitter.com/aleczandru89" target="_blank"><img src="images/social/TwitterIco.png"></a></li> 
      <li><a href="http://www.linkedin.com/profile/view?id=225866296&trk=tab_pro" target="_blank"><img src="images/social/LinkedinIco.png"></a></li> 
      <li><a href="http://www.linkedin.com/profile/view?id=225866296&trk=tab_pro" target="_blank"><img src="images/social/LinkedinIco.png"></a></li> 
     </ul> 
    </div> 
</section> 
<nav class="center overflow" id="menu"> 
    <ul class="float-left"> 
     <li><a href="#">Home</a></li> 
     <li><a href="#">About Me</a></li> 
     <li><a href="#">Blog</a></li> 
    </ul> 
    <ul id="logo"> 
     <li><a href="#" title="About me"><img src="images/Logo.png" alt="logo"/></a></li> 
    </ul> 
    <ul class="float-right"> 
     <li><a href="#">Skills</a></li> 
     <li><a href="#">Portfolio</a></li> 
     <li><a href="#">Contact me</a></li> 
    </ul> 
</nav> 
<section class="top-bottom-border"></section> 

這是我的CSS：

.center { 
     margin: 0 auto; 
     width: 960px; 
    } 
.overflow { 
    overflow: hidden; 
} 
     .top-bottom-border { 
     background: url(../images/top-bottom-border.jpg); 
     height: 37px; 
    } 
    ul#social{ 
     float: right; 
    } 
    ul#social li { 
     display: inline-block; 
     margin-left: 10px; 
     margin-top: 5px; 
    } 
    nav#menu{ 
     position: relative; 
     height: 50px; 
    } 
    nav#menu li{ 
     display: inline-block; 
     padding-top: 20px; 
     padding-bottom: 20px; 
    } 
    nav#menu .float-left{ 
     padding-left: 150px; 
    } 
    nav#menu .float-left li{ 
     margin-right: 25px; 
    } 
    nav#menu .float-right{ 
     padding-right: 150px; 
    } 
    nav#menu .float-right li{ 
     margin-left: 25px; 
    } 
    ul#logo{ 
     position: absolute; 
     left: 400px; 
     top:-40px; 
    } 

如何讓中心的圖像重疊兩個黑色邊框？

Answer 1

<nav class="center overflow" id="menu">的z-index沒有進入行爲的Li或UL，因爲你已經overflow: hidden您#nav所以標誌溢出它不會顯示。從中刪除溢出類將修復您的徽標的顯示。

編輯至於我能理解你的佈局和目標，你也可能要添加到float: left和nav#menu .float-left到float :rightnav#menu .float-right

Answer 2

你可以嘗試添加一種風格=「的z-index：5」的標誌