職位：固定; css不工作

當我申請位置固定到我的標題。正文內容與標題重疊！爲什麼會發生？而且，我該如何解決這個問題？它發生在Firefox和Chrome上。我添加了代碼，只有css有什麼問題？職位：固定; css不工作

html, body, div, span, applet, object, iframe, 
h1, h2, h3, h4, h5, h6, p, blockquote, pre, 
a, abbr, acronym, address, big, cite, code, 
del, dfn, em, img, ins, kbd, q, s, samp, 
small, strike, strong, sub, sup, tt, var, 
b, u, i, center, 
dl, dt, dd, ol, ul, li, 
fieldset, form, label, legend, 
table, caption, tbody, tfoot, thead, tr, th, td, 
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary, 
time, mark, audio, video { 
    margin: 0; 
    padding: 0; 
    border: 0; 
    font-size: 100%; 
    font: inherit; 
    vertical-align: baseline; 
} 
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section { 
    display: block; 
} 
body { 
    line-height: 1; 
    width: 1351px; 
} 
ol, ul { 
    list-style: none; 
} 
blockquote, q { 
    quotes: none; 
} 
blockquote:before, blockquote:after, 
q:before, q:after { 
    content: ''; 
    content: none; 
} 
table { 
    border-collapse: collapse; 
    border-spacing: 0; 
} 
body { 
    color: #A2A2A2; 
    padding-top: 0px; 
    font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; 
    position:relative; 
    z-index:-1; 
} 
a { 
    color: #0090D8; 
    text-decoration: none; 
} 
a:hover, 
a:focus { 
    text-decoration: underline; 
} 
#container { 
    width: 100%; 
    margin: auto; 
    padding: 0px; 
    background-color:#EBEBEB; 
    position:fixed; 
} 
header { 
    font-family: 'Open Sans', 'Helvetica Neue', helvetica, arial, sans-serif; 
    font-weight: 300; 
} 
header:after { 
    content: ''; 
    display: block; 
    clear: both; 
} 
header #logo { 
    float: left; 
    color: #0090D8; 
    padding-top: 17px; 
    font-size: 30px; 
    font-style: 700; 
    padding-left: 15px; 
} 
header nav { 
    margin-top: 3em; 
    float: right; 
} 
header nav ul { 
    margin: 0; 
    padding-bottom:0px; 
    float: right; 
} 
header nav li { 
    display: inline; 
} 
header nav li + li { 
    padding-left: 4px; 
}

來源

2014-02-25 user3340039

可能是z-index問題。需要看一些代碼。 – davidpauljunior

'position：fixed'將元素從文檔流中提取出來，因此您需要保留其他內容，例如使用margin或padding。 –

我添加了一些代碼 – user3340039

將您的HTML body位置設置爲「Relative」並應用Z-Index -1。

來源

2014-02-25 05:03:34 byteboy

這裏有一個簡單的解決方案爲您提供：

CSS：

需要身體，頭，並沒有#container的位置屬性。默認情況下，所有塊元素（例如這些元素）都設置爲position: static;，這對於您想要執行的操作來說是完美的。所有你需要做的就是調整你的HTML結構到類似於我在下面創建的那個。

HTML：

<!doctype html> 
<html> 
    <body> 

     <header> 
      <div id="logo">Img here.</div> 
      <nav>Navigation here.</nav> 
     </header> 

     <div id="container"> 
      Main content here. 
     </div> 

    </body> 
</html>

見現場演示：http://jsfiddle.net/6E6jX - CSS着色和高度添加視覺輔助，但不是必需的。

讓我知道這是否適合您的網站。

Cheerio！

來源

2014-02-25 06:57:12 Transattic

位置的默認值是靜態不相對的。 – slynagh

感謝您的更正。無論哪種方式，HTML將起作用。 – Transattic

我最終通過將我的導航的z-index設置爲999來完成此工作。感謝您的幫助！

來源

2014-02-26 00:51:18 user3340039

職位：固定; css不工作

回答

相關問題