El posicionamiento absoluto es realtivo al contenedor

Esta técnica no es para nada compleja y tampoco nada fuera de la lógica de la disposición de elementos con CSS, sin embargo llevaba tiempo necesitando poder hacer esto:

alineación abajo

Es decir, lograr que dentro de una caja un elemento tenga un posicionamiento normal, anclado en la zona superior del contenedor, y otro dentro de esa misma caja se posicione en la zona inferior de ésta. Para lograrlo me he basado en uno de los “trucos” publicados en este weblog, donde explica cómo un elemento que se posiciona de forma absoluta lo hace con respectoa su contenedor si este tiene declarado un position, es decir, si su contenedor se posiciona de forma flotante (en este caso mediante un position:relative).

Para esto jugamos con tres capas: caja, texto y bottom.

Caja se posiciona de forma relativa mediante position:relative; texto lo hace de forma normal, static, ya que no se define su posición y, por último, bottom se posiciona de forma absoluta (position:absolute) respecto a caja ésta se encuentra posicionada de forma flotante.

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
body, html {
margin:0;
padding:0;
height:100%;
background:#cccccc;
font:10pt Verdana, Arial, Helvetica, sans-serif;
}
#contenedor {
margin:0 auto;
padding:20px;
width: 400px;
background:#fff;
height:100%;
}
.caja {
float:left;
position:relative;
margin:20px;
width:150px;
height:auto;
border:1px solid red;
}
.texto {
float:left;
font-size:0.7em;
padding:10px;
width:90px;
}
.bottom {
width:30px;
height:30px;
border:1px solid blue;
position:absolute;
bottom: 10px;
right: 10px;
}
</style>
<title>Mi documento</title>
</meta></head>

<body>ntenedor">
<div class="caja">
<div class="texto">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam porttitor quam pellentesque felis. Maecenas nulla turpis, ullamcorper tristique, elementum eget, feugiat at, sapien. Nam auctor commodo arcu.

</div>
<div class="bottom">
<span>xxxx</span>
</div>
</div>
<div class="caja">
<div class="texto">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam porttitor quam pellentesque felis. Maecenas nulla turpis, ullamcorper tristique, elementum eget, feugiat at, sapien. Nam auctor commodo arcu.
</div>
<div class="bottom">
<span>xxxx</span>
</div>
</div>

</body>
</html>


2 comentarios a esta entrada

me funciona perfecto en i.e. pero como no se mucho de css para que funcione en crossbrowser, como sería para que me funcione en FireFox?

desde ya muchas gracias, y muy buen hack.

En principio no hay que cambiar nada… esta tecnica es crossbrowser en sí misma… ya que es parte del estandar CSS

Leave a Reply