Posicionar capa relativa verticalmente con porcentaje

kbanelas · #1 (**permalink**) 23/09/2009, 02:09

Hola!
El problema que tengo es que para un div al que le doy un estilo de posicion relativa y trato de mover verticalmente con top o con bottom, si introduzco sus valores como porcentaje los ignora el navegador. Sin embargo si introduzco los valores con pixeles (por ejemplo), sí se mueve el div verticalmente.

Código:

<div  style="z-index:1;"><img src="Images/elSol.jpg"/></div>

<div  style="position:relative; bottom:85%; width:20%; z-index:3;">
	<p><b>Nosotros en imágenes</b><br />
  	   <b>(iniciar  pase de diapositivas)</b>	</p>
 </div>

En teoría el párrafo debería situarse soble la imagen elSol, pero se queda debajo de la misma. Sin embargo si pongo bottom igual a x (los que sean) pixeles, la imagen si se mueve verticalmente.

En fin, espero que alguien pueda ayudarme.
Un saludo.

willyfc · #2 (**permalink**) 23/09/2009, 08:53

a ver si esto te sirve

kbanelas · #3 (**permalink**) 23/09/2009, 11:51

Gracias por contestar!!
Tu respuesta es compleja pero no me aclara el porqué top y bottom no son interpretados por los navegadores cuando se les pone un valor en porcentaje.
Llevo ya un par de días buscando información al repecto y todo indica que teóricamente deberían funcionar a la perfección, lo cual es bastante frustrante.
Pero bueno, no me rindo y si alguien puede aclararme algo al respecto, pues estupendo.
Saludos.

kbanelas · #4 (**permalink**) 24/09/2009, 13:00

Le he dado mil vueltas al código que me habéis aconsejado y sigo sin salir del apuro.
Me sigue pareciendo incleíblemente extraño que top y bottom no funcionen con porcentajes y sí con el mismo código funcionen con píxeles. Algo debo estar haciendo mal, como es evidente, os dejo el código para que alguien se anima a sacarme de la ceguera que estoy teniendo en este tema.

Código:

<style type="text/css">
#caja{
	display:table;
	height::100%;
	width:100%;
	position:absolute;
}
.cajainner{
	display:table-cell;
	margin:0;
	padding:0;
	text-align:center;
}

</style>

</head>

<body>

<div id="caja">
  <div class="cajainner"> 
    <div><img src="Images/elSol.jpg"/></div>
    <div style="position:relative; bottom:85%; z-index:2;">
	  <p><b>Nosotros en imágenes</b><br />
  	   <b>(iniciar  pase de diapositivas)</b>	</p>
     </div>

    <div style="position:relative;bottom:80%; z-index:3;"><img src="fotos/P6300027_1.jpg" /></div>
  </div>
</div>

</body>
</html>

Gracias.

Mikmoro · #5 (**permalink**) 24/09/2009, 14:25

1.- La posición relativa deplaza según las coordenadas (top-right-bottom-left) con respecto a su propia posición, no a los vértices de la ventana.
2.- El porcentaje corresponderá a la proporción con respecto a su contenedor (o padre), que como en tu caso no tiene tamaño, el 85% de nada es nada.

Añade un height: 100% a .cajainner y verás que empieza a funcionar.
Ahora cambia tu bottom: 85% por un 15% y verás su desplazamiento: un 15% del tamaño de su contenedor (100%), y con respecto a su posición inicial, no de la ventana.

Espero haberte aclarado.

kbanelas · #6 (**permalink**) 24/09/2009, 23:56

Hola!!
Aclarado!! Ahora funciona, pero tuve que incluir, además de lo dicho, en cajainner un position:absolute para que se movieran.
Gracias por todo, ok?
Nos vemos.

Mikmoro · #7 (**permalink**) 25/09/2009, 04:14

Si haces lo que te he dicho no es necesario en absoluto, pero ya no importa si te funciona como quieres.

Saludos.