我在创建一个新的网站主题时遇到了问题，在我向下滚动之前我没有想到。这是问题所在。我创建了一个固定菜单（无论您在页面上的哪个位置，它都会贴在页面顶部）。当您向下滚动时，菜单会转到内容框下方。我也找不到解决方案。无论如何，我不是专业的 html 或 css 网络开发人员。
资源：
文件：Header.php
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="interface/css/style.css">
</head>
<script type="text/javascript" src="interface/js/jquery-1.9.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('a').mouseout(function() {
$(this).stop().animate({
opacity:'0.7'
});
});
$('a').mouseover(function() {
$(this).stop().animate({
opacity:'1'
});
});
$('#header-container > a').mouseout(function() {
$(this).stop().animate({
opacity:'0.7'
});
});
$('#header-container > a').mouseover(function() {
$(this).stop().animate({
opacity:'1'
});
});
});
</script>
<div id="header-container">
<div id="header-image" align="center"><a href="#"><img src="interface/images/interface/header.png" title="Home"></a></div>
<div id="header-social">
<a id="icon" href="#"><img src="interface/images/icons/facebook.png" title="Facebook"></a>
<a id="icon" href="#"><img src="interface/images/icons/twitter.png" title="Twitter"></a>
<a id="icon" href="#"><img src="interface/images/icons/blog.png" title="Blog"></a>
</div>
<div id="header-bottom"></div>
<div id="menu">
<ul><a class="text" href="#" title="">Home</a></ul>
<ul><a class="text" href="#" title="">About</a></ul>
<ul><a class="text" href="#" title="">Articles</a></ul>
<ul><a class="text" href="#" title="">Videos</a></ul>
<ul><a class="text" href="#" title="">Tutorials</a></ul>
<ul><a class="text" href="#" title="">Downloads</a></ul>
<ul><a class="text" href="#" title="">Contact</a></ul>
<ul><a class="text" href="#" title="">Help</a></ul>
</div>
</div>
<body>
<div id="main-container">
文件：index.php
<div id="container">
<div id="content-container">
lorem ipsum
</div>
</div>
文件：页脚.php
<!--Footer Container-->
</body>
</div>
</html>
CSS 样式：style.css：
@font-face { font-family: myriad; src: url('../font/MYRIADPRO-REGULAR.OTF'); }
/*HTML Ententites*/
html{
margin:0;
left: 0;
right: 0;
top:0;
bottom: 0;
position: absolute;
font-family: myriad;
color: white;
}
body{
background:white;
}
a{
text-decoration: none;
color: white;
}
/*Containers*/
#header-container{
background:#202020;
position: absolute;
top: 0;
left: 0;
right: 0;
padding: 100px;
}
#header-bottom{
height: 1px;
width: auto;
background:#8A8A8A;
position: absolute;
bottom: 0px;
left: 0px;
right: 0px;
box-shadow: 0 0 50px 5px rgba(255,255,255,.5);
}
#header-image{
position: absolute;
top:70px;
left:300px;
cursor: pointer;
opacity: .7;
}
#header-social{
position: absolute;
right:0px;
top:50px;
}
#header-social > #icon{
opacity: .7;
}
#header-social > #icon:hover{
background: url('../images/icons/icon-hover.png') no-repeat;
opacity: 1;
}
#main-container{
background:#454545;
margin-left: -10px;
margin-right: -8px;
height: 1500px;
}
#menu{
position: fixed;
top:0px;
left: 0px;
right: 0px;
height: 50px;
background: rgba(0,0,0,.5);
}
#menu > ul{
display: inline-block;
background: rgba(10,174,254,.8);
height:40px;
cursor: pointer;
margin: 5px 0px 10px 0px;
width: 100px;
text-decoration: none;
font-size: 20px;
font-family: myriad;
}
#menu > ul:hover{
background: rgba(10,174,254,1);
}
#menu > ul > .text{
text-align: left;
color: white;
text-decoration: none;
opacity: .7;
}
#container{
position: absolute;
right: 500px;
left: 10px;
margin-top:250px;
background-clip: content-box;
}
#content-container{
background:#646464;
padding: 20px;
height: 200px;
overflow: auto;
border-bottom:3px solid #2B312D;
border-left:3px solid #2B312D;
border-right:3px solid #2B312D;
box-shadow: inset 0 0 10px 0px rgba(0,0,0,0.5);
border-bottom-left-radius:3px;
border-bottom-right-radius:3px;
}
#content-header{
}
我想问题一定出在我的 CSS 菜单中。我认为它在 html 中的分层不正确，但同样，我在分层方面很烂，我还在学习。：） 提前致谢。
实时视图 向下滚动内容框。