Foros del Web » Creando para Internet » CSS »

Capa absoluta dentro de capa relativa dentro de capa con overflow hidden se ve cortad

Estas en el tema de Capa absoluta dentro de capa relativa dentro de capa con overflow hidden se ve cortad en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 30/11/2009, 16:30
 
Fecha de Ingreso: marzo-2005
Mensajes: 47
Antigüedad: 12 años, 8 meses
Puntos: 0
Pregunta Capa absoluta dentro de capa relativa dentro de capa con overflow hidden se ve cortad

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?

Última edición por Cyttorak; 01/12/2009 a las 11:45
  #2 (permalink)  
Antiguo 30/11/2009, 16:50
Avatar de Triby
Mod on free time
 
Fecha de Ingreso: agosto-2008
Ubicación: $MX->Gto['León'];
Mensajes: 9.741
Antigüedad: 9 años, 4 meses
Puntos: 2113
Respuesta: Capa absoluta dentro de capa relativa dentro de capa con overflow hidden s

Cita:
Iniciado por Cyttorak
Capa absoluta dentro de capa relativa dentro de capa con overflow hidden se ve cortad(a)
overflow:hidden; = Todo el contenido de la capa que este fuera de los limites definidos se ocultara.
__________________
- León, Guanajuato
- GV-Foto
  #3 (permalink)  
Antiguo 30/11/2009, 17:25
 
Fecha de Ingreso: marzo-2005
Mensajes: 47
Antigüedad: 12 años, 8 meses
Puntos: 0
Pregunta Respuesta: Capa absoluta dentro de capa relativa dentro de capa con overflow hidden s

Cita:
Iniciado por Triby Ver Mensaje
overflow:hidden; = Todo el contenido de la capa que este fuera de los limites definidos se ocultara.
No siempre.
Como dije en el primer post si por ejemplo quitas el posicionamiento relativo de .dos la imagen se vera entera, aunque la .uno tenga overflow hidden

El caso es que esa solución no me vale y pregunto por otras
Por favor, leer bien el post antes de contestar.
__________________
Visita www.GranFuckultad.tk y goza de risa
  #4 (permalink)  
Antiguo 01/12/2009, 04:21
 
Fecha de Ingreso: agosto-2008
Mensajes: 469
Antigüedad: 9 años, 3 meses
Puntos: 20
Respuesta: Capa absoluta dentro de capa relativa dentro de capa con overflow hidden s

Cita:
Iniciado por Cyttorak Ver Mensaje
Por favor, leer bien el post antes de contestar.
Alguien se levanto con el pie izquierdo...

Mira tu css

.tres {
position:absolute;
left:100px;
top:10px;
border:1px solid black;
z-index:999px
}

Que yo sepa, el z-index no lleva unidades, y toda declaración css debe ser cerrada con ;

Saludos¡¡
  #5 (permalink)  
Antiguo 01/12/2009, 06:01
 
Fecha de Ingreso: marzo-2005
Mensajes: 47
Antigüedad: 12 años, 8 meses
Puntos: 0
Respuesta: Capa absoluta dentro de capa relativa dentro de capa con overflow hidden s

Ok, ya he cambiado lo del z-index, pero da igual
de hecho lo puse por probar, porque .tres es la ultima capa por aparecer asi que ya por defecto deberia salir encima

Perdonar lo de antes, pero me temía alguna respuesta asi y por ello intente explicarme bien y que quedase claro que son las 3 cosas juntas lo que provocan que no se vea la capa entera, y no solo una de ellas.
Y me frustra no haber conseguido explicarme bien o que se yo

Es como cuando te pasas horas buscando en google y luego preguntas en un foro y te dicen "busca en google"
aunque ya se que es con buena intención y tal

bueno, el caso es que lo que necesito es que se vea el div .tres entero, nada mas


P.D.: He simplificado el codigo para que haya menos lios y en http://back.host22.com/problema.html he añadido ejemplos de las tres posibles soluciones que cite pero que no me vale
Edito el primer post con el nuevo codigo
__________________
Visita www.GranFuckultad.tk y goza de risa

Última edición por Cyttorak; 01/12/2009 a las 09:29
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 17:55.