javascript - 固定定位重叠问题

Question

我在这个 Angular 落里。我有一个包含 2 个容器的布局。其中一个容器代表一张 map (#main) 并且需要始终保持在用户 View 中，另一个容器 (#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 link

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;
}