Skip to main content
2 de 4
se añadieron 97 caracteres en el cuerpo

Problemas en chrome con divs solapados usando z-index y position: absolute

Tengo el siguiente código que hace que cuando se trabaja en una pequeña ventana o quitas zoom a la ventana el divMenu en chrome solape el divexp (para plegar o desplegar el menú) y el divbody. He probado diferentes cosas, en IE11 funciona correctamente, a ver si alguien me puede ayudar, paso el código:

Aquí el CSS:

.divExp {
position:absolute;
z-index:2;
float:left;
background: url('img/ico_Exp.gif') center no-repeat;width:10px;height:55px;border-top: 1px solid #aaaaaa; border-bottom: 1px solid #aaaaaa; border-left: 1px solid #aaaaaa; color: #222222; font-weight: bold;}

.divMenu {
position:absolute;
float:left;
width:17px;
height:100%;
z-index:1;}

.divBody {
z-index:0;float:right;width:83%;}

.divBodyR {
float:right; 
width: 98%;}

Aquí el html:

            <tr valign="middle">            
                <td valign="top" valign="middle" > 
                    <div id="menu" class="divMenu">
                        <tiles:insert attribute="menu" />
                         
                    </div>
                    <div id="body" class="divBody">
                        <div class="divExp" id="exp">
                        </div>
                        <div class="divBodyR">
                            <tiles:insert attribute="body" /> 
                            
                        </div>
                        <tiles:insert attribute="dialog" />
                    </div>
                </td>
            </tr>

Conforme lo tengo ahora mismo el código, solo me da el problema presentado al plegar y desplegar.