固定佔位空間很大的位置

我真的很困惑於定位div。當我試圖使固定在頂部頭，但頭之後另一個div它擰緊，並採取太多的空間..固定佔位空間很大的位置

<div id="header"> 
    <div id="header-center"> 
     <div id="headerleft"> 
      <h1> <a href="link"> LOGO </a> </h1> 
     </div> 

     <div id="nav"> 
      <ul> 
       <li> <a href="link" LINK </a> </li> 
       <li> <a href="link" LINK </a> </li> 
       <li> <a href="link" LINK </a> </li> 
       <li> <a href="link" LINK </a> </li> 
       <li> <a href="link" LINK </a> </li> 
      </ul> 
     </div> 
    </div> 
</div> 

<div id="article"> 
    <p> HELLO </p> 
</div>

這裏是我的CSS

#header { 
height:60px; 
backgroundcolor:rgba(51,102,153,1); 
color:#FFF; 
position:fixed; 
bottom:0;left:0;right:0;top:0; 
z-index:9999; 
} 

#article { 
margin:0 auto; 
}

這裏是我的JSFIDDLE。

所以，我不知道我需要把位置固定，絕對，相對上面的div。我很困惑，因爲當我們向下滾動時，我想在頂部標題。

任何想法？

謝謝。

來源

2014-01-15 Anthosiastic

這個：'bottom：0; left：0; right：0; top：0;'是矛盾的。你可以有'底部'或'頂部'和'左'或'右'。 –

您對固定位置的使用對於標題是正確的。您只需爲'＃article'設置合適的頂部邊距或填充以考慮標頭佔用的空間。如果您不確定何時對元素位置使用「靜態」，「相對」，「固定」或「絕對」，則可能需要閱讀它們以更好地瞭解何時使用每種元素。 [這是一篇非常有用的文章]（http://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/）。 – Sadiq

嘿謝謝你的文章，它有幫助！ – Anthosiastic

#header { 
    height:60px; 
    backgroundcolor:rgba(51,102,153,1); 
    color:#FFF; 
    position:fixed; 
    left:0; 
    right： 0; 
    top:0; 
    z-index:9999; 
} 
#header-center { 
    margin: 0 auto; width: 960px; 
} 
#headerleft { 
    float: left; 
} 
#nav { 
    float: left;//this depends on what your design looks like! 
} 
#article { 
    margin:60px auto 0; 
}

來源

2014-01-15 00:57:45 jingyinggong

它適合我！ – Anthosiastic

你很近。首先，關閉所有錨標籤：

   <li> <a href="link"> LINK </a> </li> 
       <li> <a href="link"> LINK </a> </li> 
       <li> <a href="link"> LINK </a> </li> 
       <li> <a href="link"> LINK </a> </li> 
       <li> <a href="link"> LINK </a> </li>

接下來，你需要確保頁面足夠長，需要滾動。

看一看這樣的： http://jsfiddle.net/8kkS6/4/

<div id="article"> 
    <p> HELLO </p> 
    <p> HELLO </p> 
    <p> HELLO </p> 
    <p> HELLO </p> 
    <p> HELLO </p> 
    <p> HELLO </p> 
    <p> HELLO </p> 
    <p> HELLO </p> 
    <p> HELLO </p> 
    <p> HELLO </p> 
    <p> HELLO </p> 
    <p> HELLO </p> 
    <p> HELLO </p> 
    <p> HELLO </p> 
    <p> HELLO </p> 
    <p> HELLO </p> 
    <p> HELLO </p> 
    <p> HELLO </p> 
    <p> HELLO </p> 
    <p> HELLO </p> 
</div>

然後確保頭不重疊的正文文本，你需要給機身頂部一些填充：

body{ 
    padding-top:60px; 
}

來源

2014-01-15 00:54:29 Djave

固定佔位空間很大的位置

回答

相關問題