Tipos de posicionamiento en CSS. Propiedad position

Entender el posicionamiento de los elementos HTML resulta fundamental para realizar diseños que requieran cierta complejidad en su composición. Una vez comprendido como realiza el navegador la tarea de componer el documento, podemos modificar esta tarea a nuestro antojo usando la propiedad CSS position.

Comportamiento predeterminado de los elementos

Para empezar a trabajar con esta propiedad tenemos que recordar cuál es la forma en la que el navegador coloca el contenido en pantalla. Para él sólo existen dos tipos de elementos, los bloques y los elementos en línea. A partir de ellos, el navegador va componiendo el documento según va leyendo el código HTML. En el orden en que aparecen en el documento los va colocando en pantalla, aplicando el principio de que los bloques siempre empiezan en "línea nueva" del documento, ocupando, además, todo el ancho del contenedor, de manera que ningún otro elemento puede compartir espacio con él. Y los elementos en línea se colocan en la línea actual del contenido, tan pronto como hay espacio suficiente para ellos.

A partir de este comportamiento predeterminado, podemos modificar la forma en que se presenta el documento haciendo uso de la propiedad position.Esta propiedad admite cuatro valores interesantes, además de los comunes con el resto de propiedades CSS. Podemos encontrar que un elemento tiene definido su position como relative, absolute, fixed o sticky, además de valores habituales de CSS como initial, inherit o unset.
También es habitual que esta propiedad no esté definida en CSS, con lo que el elemento asume el valor predeterminado del navegador.

Sin posicionamiento definido. Position: static

Los elementos que no tienen definida la propiedad position en su CSS se comportan como está predeterminado: Los elementos de bloque ocupan el 100% de su contenedor y siempre en línea nueva, y los elementos en línea se sitúan uno junto a otro siempre que tengan espacio suficiente.
Además el orden de aparición en pantalla viene definido por el orden en que está escrito el HTML. Lo que marca la prioridad es el flujo del documento, el orden en que aparecen los elementos.

Ejemplo

	<div class="sin_pos">Div 1</div>
	<div class="sin_pos">Div 2</div>
	<div class="sin_pos">Div 3</div>
	<a href="#" class="enlace">Texto del enlace 1</a>
	<a href="#" class="enlace">Texto del enlace 2</a>
	<a href="#" class="enlace">Texto del enlace 3</a>
	
	Y el CSS:
	
	.sin_pos {
		height: 150px;
		border: 1px solid;
		background-color: lemonchiffon;
		margin: 15px 0;
	}
	
	.enlace {
		border: 1px solid;
		padding: 5px;
		font-size: 28px;
	}
	

Nos devuelve:

Posicionamiento Relativo. Position:relative

Los elementos con position: relative sirven como contenedores de referencia para sus elementos anidados que tengan definida la propiedad position: absolute.
Los elementos "relativos" mantienen su posición en el flujo del documento, pero a la vez pueden recibir atributos del tipo top, left, right, bottom.
La referencia de estos atributos no la proporciona el elemento contenedor ni el comienzo del documento, sino que se tienen en cuenta a partir de la posición que inicialmente ocupa el elemento en el flujo del documento.

Ejemplo

	<div class="relativo">Div 1</div>
	<div class="relativo" id="div_relativo">Div 2<br>Este elemento tiene ...</div>
	<div class="relativo">Div 3</div>
	<a href="#" class="enlace">Texto del enlace 1</a>
	<a href="#" class="enlace">Texto del enlace 2</a>
	<a href="#" class="enlace">Texto del enlace 3</a>
		

Nos muestra

Posicionamiento Absoluto. Position: absolute

Cuando posicionamos de forma absoluta a un elemento, lo que hacemos es sacarlo de su posición en el flujo del documento, para situarlo respecto a un eje de coordenadas.
Van a seguir manteniéndose sus atributos de tamaño, pero estos ya no afectan al resto de elementos en el documento. Al posicionarlo de forma absoluta lo que hacemos es poner el elemento a "flotar" por encima o por debajo del resto de elementos en el documento.

El "eje de coordenadas" u origen para posicionar al elemento será la esquina superior izquierda del primer elemento contenedor de este que tenga definida su posición mediante la propiedad position. En caso de que ningun contenedor del elemento posicionado de forma absoluta tenga definida la propiedad position, el origen de coordenadas es la esquina superior izquierda del documento (del body).

Ejemplo

		<div class="sin_pos">Div 1</div>
		<div class="sin_pos" id="absoluto">Div 2<br>Este elemento tiene...</div>
		<div class="sin_pos">Div 3</div>
		<a href="#" class="enlace">Texto del enlace 1</a>
		<a href="#" class="enlace">Texto del enlace 2</a>
		<a href="#" class="enlace">Texto del enlace 3</a>
		

Nos devuelve

La propiedad position: absolute tiene 2 casos específicos. Uno cuando el elemento contenedor no tiene definida su propiedad position. Y el otro cuando varios elementos con position: absolute coinciden en el mismo espacio y se superponen, y tenemos que recurrir a la propiedad z-index para cambiar su orden de apilamiento. Vamos a verlos:

Contenedor sin posición definida

Al no tener definida la propiedad position en su contenedor, este div se situa tomando como referencia el principio del body (arriba a la izquierda).
Pulsa el botón y comprueba como el div de color rojo se va a la parte superior de la pantalla porque el contenedor pierde su position

Propiedad Z-index

Esta propiedad es útil cuando varios elementos se superponen y tapan el contenido unos de otros. usándola podemos cambiar el orden de apilamiento de los elementos y hacer que cualquiera de ellos quede por encima de los otros.

Ejemplo

En este caso en cada esquina del contenedor hay cuatro elementos DIV que se superponen completamente. Como tienen las mismas propiedades solamente se ve el último de cada secuencia en el HTML, que en este caso es el pez 4 de cada banco.

Mediante la propiedad z-index cambiamos el orden en que se apilan unos elementos sobre otros para conseguir que en cada banco sea un DIV distinto el que aparece arriba del todo.

El código

	<div class="pecera" id="pecera3">
	<div class="banco1 superior">Banco 1. Pez 1</div>
	<div class="banco1">Banco 1. Pez 2</div>
	<div class="banco1">Banco 1. Pez 3</div>
	<div class="banco1">Banco 1. Pez 4</div>
	
	<div class="banco2">Banco 2. Pez 1</div>
	<div class="banco2 superior">Banco 2. Pez 2</div>
	<div class="banco2">Banco 2. Pez 3</div>
	<div class="banco2">Banco 2. Pez 4</div>
	
	<div class="banco3">Banco 3. Pez 1</div>
	<div class="banco3">Banco 3. Pez 2</div>
	<div class="banco3 superior">Banco 3. Pez 3</div>
	<div class="banco3">Banco 3. Pez 4</div>
	
	<div class="banco4">Banco 4. Pez 1</div>
	<div class="banco4">Banco 4. Pez 2</div>
	<div class="banco4">Banco 4. Pez 3</div>
	<div class="banco4">Banco 4. Pez 4</div>
	</div>
	
	Y el CSS:
	
	#pecera3 > div {
		width: 150px;
		height: 150px;
		border: 3px dashed darkorange;
	}
	.banco1 {
		position: absolute;
		top: 5px;
		left: 5px;
		background-color: lime;
	}
	.banco2 {
		position: absolute;
		top: 5px;
		right: 5px;
		background-color: red;
	}
	.banco3 {
		position: absolute;
		bottom: 5px;
		left: 5px;
		background-color: blue;
	}
	.banco4 {
		position: absolute;
		bottom: 5px;
		right: 5px;
		background-color: deeppink;
	}
	.superior {
		z-index: 1;
	}
			

Nos muestra:

Posicionamiento fijo.Position: fixed

Con esta propiedad conseguimos que un elemento se quede fijo en la pantalla con independencia del nivel de scroll que hagamos en el documento.

Un elemento con position: fixed; toma su referencia desde los bordes de la pantalla, que no son exactamente los mismos que los del elemento BODY. El body se irá haciendo más grande a lo alto, a medida que añadimos contenido en el documento; mientras que las medidas de la pantalla, o mejor de la ventana, son siempre las mismas. Por lo que el elemento posicionado de esta forma siempre estará visible, puesto que su referencia es el marco visible de la ventana

Ejemplo

Pulsa el botón para cambiar el valor position del elemento y dejarlo fijo en la parte inferior de la ventana.

En su CSS hemo definido estas propiedades:

	#fijo {
		position: fixed;
		bottom: 0;
		width: 100%;
		left: 0;
		z-index: 3;
		background-color: darkolivegreen;
		padding: 1.5rem;
		color: wheat;
		text-align: center;
		font-size: 1.5rem;
	}
				

Posición semi-fija. Position: sticky

Esta propiedad es una mezcla entre position relative y position fixed. El elemento está en su lugar correspondiente en el flujo del documento, hasta que hacemos scroll sobre él y entonces cambia a fixed quedándose pegado al borde superior de la ventana (o a la distancia que indiquemos de este).

El elemento estará visible en pantalla en modo sticky mientras su contenedor directo permanezca en la pantalla, en el momento en que el borde inferior del contenedor desaparezca con el scroll, el efecto se pierde. Por lo tanto a mayor altura del contenedor del elemento, más tiempo está el efecto en pantalla.

Nota:Para que esto funcione, ningún elemento contenedor del elemento sticky puede tener activada la propiedad overflow. Ninguno en toda la colección de ancestros del elemento. Y al mismo tiempo el elemento sticky debe tener definida la posición top con cualquier valor.

Ejemplo

Caso 1

Elemento que se queda pegado al borde superior de su contenedor cuando le alcanza el scroll, en este caso los bordes del contenedor son visibles y podemos ver perfectamente cuando empieza y cuando termina el efecto.

	<div class="pecera" id="pecera4">
	<div class="pez">Esto es otro pececito</div>
	<div class="pez" id="saltarin">Esto es otro pececito y salta</div>
	<div class="pez">Esto es otro pececito</div>
	<div class="pez">Esto es otro pececito</div>
	<div class="pez">Esto es otro pececito</div>
	<div class="pez">Esto es otro pececito</div>
	<div class="pez">Esto es otro pececito</div>
	<div class="pez">Esto es otro pececito</div>
	<div class="pez">Esto es otro pececito</div>
	<div class="pez">Esto es otro pececito</div>
	</div>
	
	El CSS para el contenedor y el elemento sticky:
	#pecera4 {
		position: relative;
	}
	#saltarin {
		position: sticky;
		background-color: orange;
		top: 0;
	}
			

El resultado:

Caso 2

Elemento que se queda pegado al borde superior de su contenedor, que no tiene los bordes visibles, y por lo tanto genera el efecto de estar pegado directamente al borde superior de la ventana. Pero de igual modo una vez que su contenedor directo (un elemento section en este caso) desaarezca de la ventana el efecto sticky desaparecerá

Fin del documento

Relleno para tener espacio de scroll suficiente

Un nuevo bloque de contenido de relleno para marcar el final del efecto sticky