Relative element showing up above absolute

Unfortunately I can't link what I'm going to describe below, as its a company internal item, but I'll provide what HTML/CSS I can.

I have a header section in which I have a search bar in a div. The div is absolutely positioned within the header section. When the user types in the input, it searches for matches and slides down a box with 5 entries (done via jQuery ajax).

On one page, the top section of the page is set to relative, so I can absolutely position items within it. However, when I search via the bar, the search results slide below the page's top section.

All elements have been set to default to a z-index of 0, and I've tried playing with the z-index of all the items with no luck. At the moment, the box that's supposed to drop down as the highest z-index of any defined css, so I'm drawing a blank of why this is happening. When I remove the "position: relative" of the page header, the bar slides where its supposed to, but of course, the children elements within don't display correctly. I really don't want to use a table for layout, but it seems my only option right now.

Let me know if any other HTML/CSS is necessary. I can also provide the relevant AJAX. There is more CSS and code on the page, but its been removed as unnecessary (or so I believe).

<div id="menu">
<a id="logo" href="/site/"><img src="/site/images/logo.jpg"></a>
<form id="menuSearchbar" method="get" action="/site/process/cSearch">
<input type="text" name="search" class="cSearchbar" autocomplete="off">
<div id="menuSearchResults" class="cSearchResults"></div>

<input type="image" name="submit" value="submit" src="/site/images/search.png">
</form>
</div>


<div id="companyHeader">
<div id="companyName">
</div>
<div id="curInfo">
</div>
<div id="lastUpdated">
</div>
</div>


#menu {
position: relative;
height: 53px;
background-color: #030;
}

#menu #menuSearchbar {
position: absolute;
top: 13px;
left: 530px;
}

#menu #menuSearchbar input[type="text"] {
width: 215px;
padding: 4px 28px 4px 6px;
font-size: 14px;
}

#menu #menuSearchbar #menuSearchResults {
top: 26px;
left: 0;
z-index: 100;
background-color: #FFF;
width: 249px;
border: 1px solid #000;
}

#menu #menuSearchbar #menuSearchResults a {
display: block;
padding: 7px 5px;
}

#menu #menuSearchbar #menuSearchResults a:hover {
background-color: #DDD;
text-decoration: none;
}

#menu #menuSearchbar input[type="image"] {
position: absolute;
right: 4px;
top: 4px;
z-index: 100;
}



#page_companyProfile #companyHeader {
position: relative;
height: 110px;
background-color: #E7E7E7;
}

#page_companyProfile #companyHeader > div {
position: absolute;
}

#page_companyProfile #companyName {
width: 400px;
top: 30px;
left: 20px;
}

#page_companyProfile #curInfo {
top: 25px;
left: 440px;
}

#page_companyProfile #lastUpdated {
top: 5px;
right: 5px;
text-align: right;
font-size: .85em;
}


To make clear, #menuSearchResults slides behind #companyHeader, not its children. When I remove "position: relative;" from #companyHeader, it works.


Also as a note, it seems this is only happening in firefox, not in Chrome (haven't run tests in all browsers yet).

Let me know if any other HTML/CSS is necessary. Yes, please provide your complete document or better a link to your page.

Yah, I thought it may not be enough... unfortunately, as mentioned, its an internal item so I can't link it... however, I'll get the code and remove content I can't show and put it somewhere.

It's late but here is a fix:

Chrome is dealing with relative - absolute relations a little bit different than other browsers:

You should position your relative menu div above other relative divs in the page. Add z-index to #menu style.

A visual representation:

#menu(relative)
| | |
| | |
| | |_ div (absolute, z-index: 100)
| |
| |_ div(absolute, z-index: 10)
|
|
|
|__________________#page(relative)

So, #page element will always stay above all absolute divs that are relative to #menu div, no matter the z-index of absolute divs.

Let's add a z-index to #menu div so it should stay above #page div


--------------------------------#menu(relative, z-index: 1)
|. . . . . . . . . . . . . . . . . . . . . . . . | |
|. . . . . . . . . . . . . . . . . . . . . . . . | |
|. . . . . . . . . . . . . . . . . . . . . . . . | |_ div (absolute, z-index: 100)
|. . . . . . . . . . . . . . . . . . . . . . . . |
|. . . . . . . . . . . . . . . . . . . . . . . . |_ div(absolute, z-index: 10)
|
|
|
|__________________#page(relative)