我已经实现了一个聊天脚本，它需要一个绝对定位的 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 */
}
我希望有一个简单的修复程序，因为聊天脚本太好了，无法删除。
谢谢，
蒂姆
最佳答案
- 你最好让你想要的东西保持在相对于视口(viewport)的固定位置，position:fixed;。
- 背景颜色看起来很糟糕。
- 您可以使周围元素(主要)position:relative而不给它顶部/左/右/底部属性和其中的每个“固定”元素，position:absolute，因为它们现在将相对于具有位置的父元素:亲戚。
- 如果这些都不起作用，请发布更多代码，尤其是“随页面上下滚动的元素”的定位。还不清楚您对“页面”的含义。 body ？网页？视口(viewport)？主要的内容？
关于jquery - CSS 绝对 DIV 导致其他绝对 DIV 问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/2900873/