起初我以为这会是一个简单的修复，然后我开始在一分钟内失去脑细胞。
我正在提供 CODEPEN HERE
基本上，我在页面顶部有两个元素，它们必须保持固定，而页面底部(内容)自然滚动，不会重叠固定元素。
有什么想法吗？
HTML
<body >
<div class="wrapper">
<div class="container">
<div class="sidebarmenu">
<ul class="sidebarmenu1">
<li><a href="index.html">Home</a></li>
<li><a href="1.html">Info</a></li>
<li><a href="11.php">Contact Us</a></li>
<li><a href="2.php">Page 2</a></li>
<li><a href="3.php">Page 3</a></li>
<li><a href="4.php">Page 4</a></li>
<li><a href="5.php">Page 5</a></li>
<li><a href="6.php">Page 6</a></li>
</ul>
</div>
<div class="banner" >
<img style="" alt="logo text" src="http://www.garethjmsaunders.co.uk/blueprint/placeholders/gif/grid/span-11-rows-15.gif" />
</div>
<div class="spacer"></div>
</div>
</div>
<div class="mainContent" >
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. <br><br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc.<br><br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc.<br><br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc.
</div>
</body>
CSS
body {background-color: black; width: 980px; margin: 0px auto;}
.wrapper {width: 100%; } /*this shows the element fixed positioning is working */
.container {width:100%; margin:0 auto; padding: 0px 15px; background-color: black; overflow:hidden}
.banner {margin: 15px 0px 0px 500px; position:fixed; }
.spacer{background-color:black; height:290px;}
.mainContent { color:white; z-index:-1; margin-top:20px; width: 980px; overflow:hidden}
/* sidebar */
.sidebarmenu {float: left; background-color:Black; position:fixed; margin: 15px; }
.sidebarmenu ul{margin: 0;padding: 0;list-style-type: none;font: bold 13px Verdana;width: 180px; border-bottom: 1px solid #ccc;}
.sidebarmenu ul li a{display: block;overflow: auto;color: black;text-decoration: none;padding: 6px;border-bottom: 1px solid #778;border-right: 1px solid #778;}
.sidebarmenu ul li a:link, .sidebarmenu ul li a:visited, .sidebarmenu ul li a:active{ background-color: #c0c0c0;}
.sidebarmenu ul li a:visited{color: white;}
.sidebarmenu ul li a:hover{background-color: black;color:red;}
最佳答案
解决这个问题的技巧是，不是单独声明侧边栏和横幅的固定位置，而是将它们分组在位置设置为固定的公共(public)父元素下。然后，您可以为父元素提供背景色，以允许它屏蔽其下方的任何内容。
查看移植到 JSFiddle 的修订示例:http://jsfiddle.net/88Sf9/1/
修改后的CSS规则如下:
.wrapper {
width: 100%;
position: fixed;
}
.container {
width:100%;
margin:0 auto;
padding: 0px 15px;
background-color: black;
overflow:hidden;
}
.mainContent {
color: white;
padding-top: 290px;
width: 980px;
}
一些注意事项:
- 您不需要为
.mainContent声明一个负的 z-index - 您可以安全地删除
overflow: hidden;声明
我还在你的主容器上应用了顶部填充，这样当你沿 y 轴的滚动位置为 0 时(即当你在页面顶部)。
但是，如果您正在处理具有动态背景的容器，则该解决方案将不起作用，例如图像或渐变。对于这种情况，您可能需要考虑使用 CSS 掩码，它缺乏跨浏览器支持和标准化。
关于html - 如何在页面顶部添加固定边距，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22821157/