頂部而不是頂部的固定標題

我試圖在頁面頂部獲得一個固定標題，但由於某種原因，它始終在容器頂部。當我使用margin-bottom或margin-top時，它仍粘在容器上。頂部而不是頂部的固定標題

index.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; 
} 
.full-container { 
    width:100%; 
} 
.boxborder { 
    -webkit-box-shadow:inset 0px 0px 0px 10px black; 
    -moz-box-shado:inset 0px 0px 0px 1px black; 
    box-shadow:inset 0px 0px 0px 1px black; 
} 
.header { 
    height: 150px; 
    margin-bottom: 20px; 
    position: fixed; 
} 
.container { 
    position: relative; 
    margin-left: auto; 
    margin-right: auto; 
    width: 800px; 
    height: 1200px; 
}

的index.html

<!DOCTYPE html> 
<html> 
    <head> 
     <title></title> 
     <link rel="stylesheet" href="index.css"> 
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
    </head> 
    <body> 
     <div class="full-container header boxborder"></div> 
     <div class="container boxborder"></div> 
    </body> 
</html>

來源

2013-02-14 ThreaT

除了@reinder化妝的答案當我嘗試你的代碼容器是alwa時，肯定會使用z-index在標題頂部。嘗試將一個更高的z-index值放入.header比容器。 – 2013-02-14 07:39:22

你需要在你的CSS定義top和left爲.header

來源

2013-02-14 07:36:21 reinder

從技術上講，你不需要離開。 top：0將始終將頁眉置於頁面頂部。 – fredsbend 2013-02-14 07:40:02

是啊@fredsbend但仍然回答是正確的。你也可以只定義'top'，但更好的是添加兩個。您可以聲明一面，例如'頂部'，並可以添加邊距'margin：0 10px' – 2013-02-14 07:41:27

我同意，我只是覺得在這裏添加它會很好，它可能有助於@ThreaT瞭解這些屬性實際上做了什麼。 – reinder 2013-02-14 07:43:58

頂部而不是頂部的固定標題

回答

相關問題