CSS 绝对 DIV 导致其他绝对 DIV 问题答案

【问题标题】：CSS absolute DIV causing other absolute DIV problemsCSS 绝对 DIV 导致其他绝对 DIV 问题
【发布时间】：2010-05-25 07:06:27
【问题描述】：

我已经实现了一个聊天脚本，它需要一个绝对定位的 DIV 来包裹页面内容。

这是为了确保聊天窗口保持在底部。

问题在于，由于这个主包装器的绝对定位，所有其他绝对定位的元素（例如 Jquery 自动完成、日期选择器等）现在随着页面上下滚动。

以下是 HTML 示例：

<body>
<div id="main_container">
    <div id="content">Elements like Jquery Autocompletes, Datepickers with absolute positioned elements in here</div>
</div>

DIV“main_container”样式如下所示：

#main_container {
    width:100%;
    background-color:#ffffff; /* DO NOT REMOVE THIS; or you'll have issue w/ the scrollbar, when the mouse pointer is on a white space */
    overflow-x: hidden;
    overflow-y: scroll;
    height:100%;    /* this will make sure that the height will extend at the bottom */
    position:absolute; /* container div must be absolute, for our fixed bar to work */
}

我希望有一个简单的修复，因为聊天脚本太好了，无法摆脱。

谢谢，

提姆

【问题讨论】：

标签： jquery css chat

【解决方案1】：

您可能最好将您想要保持在相对于视口的固定位置，position:fixed;。
背景颜色看起来很糟糕。
您可以使周围元素（主）位置：相对而不给它顶部/左/右/底部属性以及位置：绝对中的每个“固定”元素，因为它们现在将相对于具有位置的父元素：相对。
如果这些都不起作用，请发布更多代码，尤其是针对“随页面上下滚动的元素”的定位。也不清楚您对“页面”的含义。身体？ html？视口？主要内容？

【讨论】：

好的，我只是将定位更改为相对。一切似乎仍然很好！我需要测试更多的错误，但感谢您的回答！