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

固定定位重叠问题

1 个答案: