Posicionamiento absoluto de elementos en CSS

En esta lección analizaremos el posicionamiento absoluto de elementos. Permite posicionar elementos según las coordenadas indicadas de la página. Por ejemplo, se puede colocar un elemento en la posición 100px desde la parte superior de la página y 200px desde la izquierda. El elemento se moverá allí, sin importar lo que haya allí otros elementos y simplemente se colocará sobre ellos. Se dice que en este caso el elemento sale del flujo normal del documento: todos los demás elementos se comportarán como si nuestro elemento no estuviera allí.

Para hacer que un elemento esté posicionado absolutamente, es necesario asignarle a este elemento la propiedad position con el valor absolute. Además de esta propiedad, se necesitan otras dos: una establecerá la coordenada vertical, y la segunda - la horizontal.

Para la vertical, es necesario establecer un margen desde arriba o desde abajo. El margen superior lo establece la propiedad top, y el margen inferior - la propiedad bottom. Para la horizontal, es necesario establecer un margen desde la izquierda o desde la derecha. El margen izquierdo lo establece la propiedad left, y el margen derecho - la propiedad right.

Veamos algunos ejemplos.

Ejemplo

Para empezar, simplemente creemos dos bloques sin posicionamiento (presten atención al hecho de que los elementos no están pegados al borde de la ventana, ya que body tiene margin por defecto):

<div id="elem1"></div>
<div id="elem2"></div>

#elem1 {
	width: 200px;
	height: 200px;
	border: 1px solid red;
}
#elem2 {
	width: 100px;
	height: 100px;
	border: 1px solid green;
}

Ejemplo

Ahora asignemos al bloque verde posicionamiento absoluto, colocándolo en la posición superior de 150px e izquierda de 100px:

<div id="elem1"></div>
<div id="elem2"></div>

#elem1 {
	width: 200px;
	height: 200px;
	border: 1px solid red;
}
#elem2 {
	position: absolute;
	top: 150px;
	left: 100px;
	
	width: 100px;
	height: 100px;
	border: 1px solid green;
}

Ejemplo

Ahora coloquemos el bloque verde en la posición 0px desde arriba y 0px desde la izquierda:

<div id="elem1"></div>
<div id="elem2"></div>

#elem1 {
	width: 200px;
	height: 200px;
	border: 1px solid red;
}
#elem2 {
	position: absolute;
	top: 0px;
	left: 0px;
	
	width: 100px;
	height: 100px;
	border: 1px solid green;
}

Ejemplo

Ahora coloquemos el bloque verde en la posición 0px desde arriba y 0px desde la derecha:

<div id="elem1"></div>
<div id="elem2"></div>

#elem1 {
	width: 200px;
	height: 200px;
	border: 1px solid red;
}
#elem2 {
	position: absolute;
	top: 0;
	right: 0;
	
	width: 100px;
	height: 100px;
	border: 1px solid green;
}

Ejemplo

Ahora coloquemos el bloque verde en la posición 0px desde abajo y 0px desde la derecha:

<div id="elem1"></div>
<div id="elem2"></div>

#elem1 {
	width: 200px;
	height: 200px;
	border: 1px solid red;
}
#elem2 {
	position: absolute;
	bottom: 0;
	right: 0;
	
	width: 100px;
	height: 100px;
	border: 1px solid green;
}

Ejemplo

Ahora coloquemos el bloque verde en la posición 0px desde abajo y 0px desde la izquierda:

<div id="elem1"></div>
<div id="elem2"></div>

#elem1 {
	width: 200px;
	height: 200px;
	border: 1px solid red;
}
#elem2 {
	position: absolute;
	bottom: 0;
	left: 0;
	
	width: 100px;
	height: 100px;
	border: 1px solid green;
}

Tareas prácticas

Utilizando el posicionamiento absoluto, coloca los bloques de la siguiente manera: