Estoy editando y añadiendo funcionalidad a una blog de blogspot.
Lo que he hecho es crear unos links que cuando pasas el raton por encima muestran emergentemente una imagen (la que tienene en el href) y si clicas se agranda y la puedes mover
No voy a entrar en detalles sobre eso porque no es el problema, funciona perfectamente, al menos en los post, porque luego me di cuenta que mis imagenes "emergentes" cuando eran de un link en los comentarios solo se podian ver dentro del ancho de la columna de los comentarios, cuando la arrastraba a otro lado se dejavan de ver.
Es un poco difícil de entender así, pero el caso es que tras mucho dar vueltas con el firebug he detectado cual es el fallo y lo he reproducido en este sencillo html
problema.html
Y aquí esta el código (como esta simplificado no hay imagen, si no un div con la clase .tres en su lugar)
Código:
<html>
<head>
<style type='text/css'>
div {
padding:5px;
}
.uno {
width:425px;
overflow:hidden;
background-color:yellow;
}
.dos {
position:relative;
background-color:green;
}
.tres {
position:absolute;
left:100px;
top:20px;
border:5px solid black;
z-index:999;
width:425px;
background-color:red;
}
</style>
</head>
<body>
<div class="uno">uno<br/>uno<br/>uno
<div class="dos">dos<br/>dos<br/>dos<br/>
<div class="tres">tres<br/>tres<br/>tres<br/>
</div>
</span>
</div>
</div>
</body>
</html>
La cuestión es que el div tres debería salir entera y por enzima de todo pero no lo hace por el efecto combinado de lo siguiente:
a) el overflow:hidden; de la clase .uno
b) el position:relative; de la clase .dos
c) el position:absolute; de la clase .tres
Cambiando o quitando cualquiera de las 3 cosas el div tres se ve bien, pero...:
1) si quito o cambio "a)" jodo el diseño del blog porque eso lo esta poniendo el administrador
2) si quito "b)" pasa lo mismo que en "1)"
3) si cambio "c)" por position:fixed el div tres se ve entero pero luego me daría problemas porque ese div va a ser dragable por javascript y para que funcione bien el posicionamiento tiene que ser absoluto.
El anidamiento tampoco se puede cambiar.
Así que la solución mas optimas seria añadirle algún estilo a .tres para que se superponiera a todo lo demás, pero no doy con ello.
¿Alguna idea?