顶部而不是顶部的固定标题

我试图在页面顶部获得一个固定标题，但由于某种原因，它始终在容器顶部。当我使用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

顶部而不是顶部的固定标题

回答

相关问题