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.