html - 位置:固定; CSS 不工作

标签 html css position css-position

当我将位置固定应用于我的标题时。正文内容与标题重叠!为什么会这样?而且,我该如何解决这个问题?它发生在 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;
}

最佳答案

将您的 HTML 正文位置设置为“相对”并应用 Z-Index -1。

关于html - 位置:固定; CSS 不工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22004966/

相关文章:

android - recyclerview 中的 Webview 没有原地展开。 (底部不缩小)

css - Bootstrap 在 Safari 中无响应 - 主机 : Google Drive

html - 禁用具有透明 div 的 div

css - 将多个 <div> 放在一个位置为 :fixed 的内部

javascript - 如何将 .index() 的第一个元素的默认索引从 0 更改为 1

html - 如何使用CSS的线性渐变来创建像设计一样的 Angular

php - Div 在页面加载时移动

javascript - 在 React 中将父元素居中的问题

html - 为什么垂直居中网页在小型显示器和移动设备上会中断?

php - 将重音符号转换为 HTML,但忽略标签