0

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 divPlegar (para plegar o desplegar el menú) y el divbody. He probado diferentes cosas, en IE11 funciona correctamente (depurando y buscando el elemento divMenu observo que también ocupa más contra menos zoom le das a la pantalla en IE11, pero aquí si funciona bien. ¿Será por z-index?) A ver si alguien me puede ayudar, paso el código:

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

.divPlegar {
position:absolute;
z-index:2;
float:left;
background: url('img/ico_Exp.gif') center no-repeat;width:1px;height:5px;}

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

.divBody {
z-index:0;float:left;width:90%;}
2
  • Sería bueno si agregaras el html también, así como está no se entiende mucho, en caso que alguien tenga un problema similar.
    – Shaz
    Commented el 5 sept. 2016 a las 14:15
  • Lo tenía añadido pero como no tenía nada que ver lo quité pues tenía que retocar mucho código pues no lo podía subir normal. Quien tenga la misma duda que yo la solución que dí abajo le valdrá para comerse un poco la cabeza y probar con el posicionamiento y el z-index que fue lo importante, pero gracias por el consejo @Shaz
    – Javier GT
    Commented el 5 sept. 2016 a las 15:11

1 respuesta 1

1

Solucionado:

He probado mil formas diferentes el CSS, señalo antes de pasar el código que creo que el problema se encontraba en el orden de solapación del z-index entre el menu y el body, y añadir en el body posicionamiento relativo pues han sido los últimos cambios y como pueden apreciar únicos y aparentemente todo me funciona bien. Aquí está el código:

.divPlegar {
position:absolute;
z-index:2;
float:left;
background: url('img/ico_Exp.gif') center no-repeat;width:1px;height:5px;}

.divMenu {
position:absolute;
float:right;
width:10%;
height:100%;
z-index:0;}

.divBody {
position:relative;z-index:1;float:left;width:90%;}

Espero que a alguien con problemas parecidos le haga hacer hincapié en dichos estilos.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.