z-index, position: absolute e Internet explorer

Hace poco estaba haciendo un menu el cual abria un div sobre el resto del contenido de la pagina con JQuery, el codigo es algo asi:

<div class="Container">
<div class="bar fl">
<a href="#" id="btn1">
            <img src="<%=Url.Content("~/Content/Imagenes/img1.jpg") %>" alt="<%=Resources.buscarPorCine %>" />
        </a><a href="#" id="btn2">
            <img src="<%=Url.Content("~/Content/Imagenes/img2.jpg") %>" alt="<%=Resources.buscarPorPelicula %>" />
</div>
<div class="Buscador" id="Buscador1">    
            contenido    
        </div>
<div class="Buscador" id="Buscador2">
            contenido
        </div>

</div>

<style type="text/css">
.bar
{
    width: 100%;
    height: 44px;
    background: url(Imagenes/bar.jpg) repeat-x;   
    z-index: 5;
}

.Buscador
{
    background-color: #483456;
    border-color: #483456;
    height: 500px;
    width: 946px;
    z-index: 5;   
    position: absolute;
    top: 365px;
    display:none;   
}
</style>

<script type="text/javascript" language="javascript">
    $(document).ready(function() {
        $("#btn1").click(function() {
            $("#Buscador2").slideUp();

            $("#Buscador1").delay(1000).slideDown();
           
        });

        $("#btn2").click(function() {
            $("#Buscador1").slideUp();
            $("#Buscador2").delay(1000).slideDown();
           
        });
    });
</script>

Básicamente dos links programados por JQuery para animar el menú, y el resto CSS con z-index y position absolute para mostrar el div encima del contenido.

Este código funciona perfecto en la mayoría de los exploradores, menos por supuesto en IE 6 y 7, donde el menu en lugar de colocarse encima del contenido se colocaba a la derecha de la pagina, destruyendo todo.
Bueno, el problema tiene algo que ver con la forma de manejar el Z-Index de IE 7, el cual al dibujar los elementos con esta propiedad "genera una nueva pila de contexto", 
y aunque aun no entiendo muy bien lo que esto significa, la solución consiste en colocar un div por encima del que queremos que aparezca encima del contenido,
 con un z-index mayor, veamos el código:

<div class="Container">
<div style="z-index: 7;">
        <div class="Buscador" id="Buscador1">     
            contenido     
        div>
div>
<div style="z-index: 7;">
     <div class="Buscador" id="Buscador2">
            contenido
     div>
div>
<div class="bar fl">
<a href="#" id="btn1">
            <img src="" alt="" />
        a><a href="#" id="btn2">
            <img src=""     alt="" />
div>


<style type="text/css">
.bar
{
    width: 100%;
    height: 44px;
    background: url(Imagenes/bar.jpg) repeat-x;    
    z-index: 5;
}

.Buscador
{
    background-color: #483456;
    border-color: #483456;
    height: 500px;
    width: 946px;
    z-index: 5;    
    position: absolute;
    top: 365px;
    display:none;    
}
style>

<script type="text/javascript" language="javascript">
    $(document).ready(function() {
        $("#btn1").click(function() {
            $("#Buscador2").slideUp();

            $("#Buscador1").delay(1000).slideDown();
            
        });

        $("#btn2").click(function() {
            $("#Buscador1").slideUp();
            $("#Buscador2").delay(1000).slideDown();
            
        });
    });
script>










Adicionalmente tuve que mover los dos divs del menú a la parte superior del código.