当我将固定位置应用于我的标题时。身体内容与标题重叠!为什么会这样?而且,我该如何解决这个问题呢?它发生在Firefox和Chrome中。我添加了代码,只有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;
}
答案 0 :(得分:1)
将您的HTML正文位置设为“相对”并应用Z-Index -1。
答案 1 :(得分:0)
这是一个简单的解决方案:
<强> CSS:强>
body,header和#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!
答案 2 :(得分:0)
我最后通过将导航的z-index设置为999来实现此功能。 谢谢你的帮助!