javascript - 修复定位重叠问题

Question

我在这个角落里。我有一个带有 2 个容器的布局。其中一个容器代表地图（#main）并且需要始终保持在用户视图中，另一个容器（#sub）用作可滚动的内容。如果内容水平适合，一切看起来都很好。但是，一旦出现水平条（调整窗口大小以进行复制），可滚动内容就会与固定内容重叠，我不知道如何修复它。我知道通过绝对定位固定内容并使用javascript从顶部调整其位置来修复它的一种方法。有什么办法可以解决吗？

示例代码如下：

html:

<div id="content">
    <div id="main">main</div>
    <div id="sub">
        <strong>Sub</strong><br />
        sub<br />
        sub<br />
        sub
    </div>
</div>

CSS：

#content {
    width: 1200px;
    margin: 0 auto;
}
#main {
    position: fixed;
    width: 849px;
    height: 500px;
    background: red;
}
#sub {
    position: relative;
    float: right;
    width: 350px;
    height: 3500px;
    background: green;
}

JSFiddle 链接

Answer 1

根据您的评论，听起来不允许用户滚动将解决问题：

body {
  padding: 0;
  margin: 0;
  overflow-x:hidden;
 }

如果您希望它们都滚动，则必须删除固定定位：

#main {
position: relative;
width: 849px;
height: 300px;
background: red;
font-size: 50px;
text-align: center;
padding-top: 200px;
    float:left;
}