CSS absolute DIV causing other absolute DIV problems_问答_开发者

CSS absolute DIV causing other absolute DIV problems

开发者 https://www.devze.com 2023-01-01 02:35 出处：网络

I have implemented a chat script which requires an absolutely positioned DIV to be wrapped around the pages content.

相关专题：chat css jquery

I have implemented a chat script which requires an absolutely positioned DIV to be wrapped around the pages content.

This is to ensure the chat windows stay at the bottom.

The problem is that because of the absolute positioning of this main wrapper, all other absolutely positioned elements (eg. Jquery Auto-completes, datepicker's etc) now scroll up and down with the page.

Here is an example of the HTML:

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

The DIV "main_container" style looks like this:

#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 */
}

I hope there is a simple fix as the chat script is too good to get rid of.

Thanks,

Tim

You are probably better off making what you want to stay in a fixed position relative to the viewport, position:fixed;.
The background colour seems like a bad hack.
You can make the sorrounding element (main) position:relative without giving it top/left/right/bottom properties and each "fixed" element within, position:absolute, as they will now be relative to the parent which has position:relative.
If none of these work, post more code, especially for the positioning of your "elements that scroll up and down with the page". It's also unclear what you mean with "page". Body? Html? Viewport? main's contents?