Question

我正在创建一个包含三个主要组件的页面：“headerSticky”标题div，“sidenav”左侧导航div和“content”div。

侧面导航是固定的，不会移动;但内容div应该可以单独滚动。但是，内容div的顶部始终与标题div重叠。

以下是标题的CSS：

#headerSticky{
position:fixed;
padding:6px;
width: 100%;}

和内容div：

#content {
padding-top: 100px;
float:right;
overflow: auto;
height: 90%; 
width: 840px;
padding: 0 20px 20px;}

任何帮助将不胜感激。谢谢！

编辑：页面的屏幕截图。顶部的表格应该有一个标题（带有“条件”和“条件状态”值），标题为“问题”，但它隐藏在标题下方：

Answer 1

您可以尝试从#headerSticky中删除该位置。如果你定位绝对或固定的东西，任何后续元素将表现为它不存在（在这种情况下创建重叠）。另外，我不确定，但我认为你的一些风格可能无效。

我希望这会有所帮助。

Answer 2

属性float:top;不存在。见这里：w3c Float property。

固定位置意味着此元素将始终具有相同的位置，当滚动屏幕时，这将“粘贴”到您将其放置在屏幕上的位置，因此当您的内容长于屏幕时，标题将为重叠它，删除它，添加一个高度。

除去浮子，这些是你的基本布局div，需要比浮动更准确的定位。

如果您还可以为您的其他元素发布HTML标记和CSS，我们可以为您提供更多帮助：）

希望其中一些有用。

Answer 3

我改变了CSS一点，这个问题已经解决了 - 这是我用于标题的代码：

#headerSticky { 
     height: 28px; 
    position: absolute; 
    top: 0; 
     width: 100%;
}

和内容div：

#content {
    height: 100%;
    float:right;
    overflow-y: auto;
    overflow-x: auto;
}

我知道这与我原来的情况没有什么不同，但我从头开始使用CSS，问题肯定不复存在。

谢谢大家花时间回答！对此，我真的非常感激。