Fixed positioned search box with Autocomplete suggestions

Question

In my webapp I have a search box in a fixed toolbar on the top of webpage. I implemented the fixed position of toolbar like this....

#toolbar {
        position: fixed !important; 
        position: absolute;
        height: 25px;
        width: 100%;
        top: 0px;
        left: 0px;
        margin: 0;
        z-index: 100;
        font-size: 12px;
    }

Now, I am implementing a keyword autocomplete function on it using a jQuery plugin.

My problem is how to keep the autocomplete suggestions fixed/attached to the search box when the window is scrolled/resized.

The css for autocomplete suggestions box is....

element.style {
   display:none;
   left:166px;
   position:absolute;
   top:96px;
   width:130px;
}
.ac_results {
   background-color:white;
   border:1px solid #C5DBEC;
   overflow:hidden;
   padding:0;
   z-index:99999;
}

I have a problem when I perform these operations..

1. Type something in search box, causing the suggestions to appear
2. With search box open, I scroll the window.
3. This causes the autosuggestions box to be scrolled as well.

What can I do to solve this bug?

Here is how it looks.

The autocomplete have scrolled over the fixed positioned input box.

Update 1: I tried adding the position: fixed; to the autocomplete.

That gives problem in a different case.

• Type something in search box, causing the suggestions to appear
• Press escape, causing the box to disappear
• Scroll down the window
• Type something in search box, causing the suggestions to appear
• Now the search box, appears at the position it appeared before scrolling since the position is fixed

Update:

Update 2:

The following code added to autocomplete css does the trick.

.ac_results {
       background-color:white;
       border:1px solid #C5DBEC;
       overflow:hidden;
       padding:0;
       z-index:99999;
       position: fixed;
       top: 0px;
       margin: 20px 0px 0px 0px; /* The top margin defines the offset of textbox */
    }

Regards

Answer 1

Why not make the search results position: fixed as well? As long as you know the height of the textbox, you can position the results list such that it is always just under the textbox element.

Answer 2

position:fixed is not the way to do what you're after.

position:absolute should have solved your issue though which makes me think either their is a browser bug (which browsers have you tested) or something in the plugin or css is overwriting the position:absolute with position:fixed - have you checked FireBug in Firefox to see the actual CSS being applied to the dropdown box?

Those are the only 2 causes I can think of to explain what you're seeing.

Answer 3

position:relative on the container, that contains the results list (which has position:absolute) solves the problem.