如何阻止我的“headerSticky”和“content”div重叠？

I'm making a page that has three main components: a "headerSticky" header div, "sidenav" left navigation div, and "content" div.

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

The side navigation is fixed and does not move; but the content div should be scrollable on its own. However, the top of the content div is always overlapped by the header div.

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

Here is the CSS for the header:

这是标题的CSS：

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

and the content div:

和内容div：

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

Any help would be appreciated. Thank you!

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

Edit: Screen shot of the page. There should be a title for the table at the top (with the "Condition" and "Condition Status" values) that says "Problems," but it is hidden beneath the header:

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

alt text http://img14.imageshack.us/img14/477/screenshot20100510at611.png

替代文字http://img14.imageshack.us/img14/477/screenshot20100510at611.png

3 个解决方案

#1

You can try removing the position from your #headerSticky. If you position something absolute or fixed, any subsequent elements will act as though its not there (in this case creating an overlap). Also, I'm not sure, but I think some of your styles may not be valid.

I hope this helps in some way.

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

#2

The property float:top; doesn't exist. See here: w3c Float property.

物业浮动：顶部;不存在。看到这里：w3c Float属性。

Position fixed means that this element will always have the same position, when the screen is scrolled, this will "stick" to the place you have positioned it on screen, so when your content is longer than the screen, the header will overlap it, remove this, add a height.

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

Remove the floats also, these are your basic layout divs and need more accurate positioning than float.

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

If you could also post up your HTML markup and the CSS for your other element we could probably help you more :)

如果您还可以发布您的HTML标记和其他元素的CSS，我们可能会帮助您更多:)

Hope some of that helps.

希望其中一些有所帮助。

#3

I changed around the CSS a bit and this problem has been solved--here is the code that I used for the header:

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

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

and the content div:

和内容div：

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

I know this isn't that different from what I originally had, but I started over from scratch with the CSS and the problem is definitely gone.

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

Thank you everyone who took the time to answer! I really appreciate it.

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