Posiciones absolutas dentro de relativas

Una de las cosas que aprendí a dominar últimamente en CSS es el manejo de los márgenes absolutos (top, left, right, bottom) para posiciones absolutas dentro de bloques con posición relativa. Esta posibilidad que me mostró el Max ha sido de gran ayuda para los últimos proyectos en los que he trabajado.

La teoría dice que un bloque X con posición absoluta posee márgenes absolutos respecto al html, esto quiere decir, que cualquier margen del tipo top, left, right y bottom, lo ubicarán respecto a los márgenes de la página completa.

div.contenedor{

}
div.x{
	position: absolute;
	bottom: 0;
	left: 0;
}

Ver Ejemplo

Sin embargo, al declarar el contenedor padre de X con una posición relativa, este se comportará como absoluto dentro de los márgenes de su contenedor padre.

div.contenedor{
	position: relative;
}
div.x{
	position: absolute;
	bottom: 0;
	left: 0;
}

Ver ejemplo

Esta posibilidad de manejo es muy útil cuando se trabaja en diseños líquidos, o con elementos que requieren de esquinas redondeadas.

2 thoughts on “Posiciones absolutas dentro de relativas”

  1. Hay que tener siempre presente que para diseños líquidos hay que trabajar con medidas relativas, como % por ejemplo previamente haciendo las conversiones y ajustes necesarios desde px (FireWorks)

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

Puedes usar las siguientes etiquetas y atributos HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>