當前分區之外的切換分區

Question

目前我有一個切換選項附加到li元素。不過，我似乎無法顯示在父div之外切換的div。

<div id="header"> 
    <header> 
     <ul> 
      <li>1</li> 
      <li class="action" data-content="#content1">2</li> 
     </ul> 
    </header> 
</div> 
<div class="content" id="content1"> 
    <p>A Bunch of Content</p> 
</div> 

爲了節省空間，這裏是我的小提琴：http://jsfiddle.net/Thelawman/9KCg9/ 當我做到這一點我可以看到頭內切換DIV的頂部。我想直接在標題元素下顯示它。 在此先感謝，這裏的人總是非常有幫助。

Answer 1

問題是因爲position:fixed您使用的是div#header。試試這個：

#header { 
    overflow:hidden; 
    top:0; 
    left:0; 
    width:100%; 
    height:66px; 
    z-index:1; 
    background-color:#000000; 
} 

DEMO

或

如果你想使用position:fixed留固定在頂部標題爲您滾動頁面。您可以使用margin-top至div.content。試試這個：

.content { 
    display:none; 
    width:500px; 
    height:200px; 
    padding:10px; 
    background-color:#FF000D; 
    border: 4px solid; 
    margin-top:68px; 
} 

DEMO