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:

Div 1
Div 2
Div 3
Texto del enlace 1 Texto del enlace 2 Texto del enlace 3

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

Div 1
Div 2
Este elemento tiene estos valores: top: 50px, left: 150px y width: 350px. Respecto a su posición inicial en el documento
Div 3
Texto del enlace 1 Texto del enlace 2 Texto del enlace 3

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

Div 1
Div 2
Este elemento tiene estos valores: top: 50px, left: 150px y width: 350px. Respecto a su contenedor "pizarra", que tiene definido position: relative;
Div 3
Texto del enlace 1 Texto del enlace 2 Texto del enlace 3

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

Este contenedor debería mostrar un elemento div posicionado de forma absoluta, que queda situado fuera de él porque no le hemos definido su position. Y por eso aparece en la parte superior de la pantalla.
Soy #sin_pos y estoy solo!!

Este elemento tiene estos valores: top: 50px, left: 150px y width: 350px. Respecto a su contenedor "#sin_pos", que no tiene definida la posición, y por eso está aquí arriba

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:

Banco 1. Pez 1
Banco 1. Pez 2
Banco 1. Pez 3
Banco 1. Pez 4
Banco 2. Pez 1
Banco 2. Pez 2
Banco 2. Pez 3
Banco 2. Pez 4
Banco 3. Pez 1
Banco 3. Pez 2
Banco 3. Pez 3
Banco 3. Pez 4
Banco 4. Pez 1
Banco 4. Pez 2
Banco 4. Pez 3
Banco 4. Pez 4

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.

Este elemento se muestra siempre pegado 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 a alguno de los bordes de la ventana.

Lo interesante de esta propiedad es que el elemento puede quedar pegado a los bordes de su contenedor si este tiene definida su propiedad position.

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 elmento sticky debe tener definida la posición top con cualquir valor.

Ejemplo

Caso 1

Elemento que se queda pegado al borde superior de su contenedor cuando le alcanza el scroll


<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:

Esto es otro pececito
Esto es otro pececito y salta
Esto es otro pececito
Esto es otro pececito
Esto es otro pececito
Esto es otro pececito
Esto es otro pececito
Esto es otro pececito
Esto es otro pececito
Esto es otro pececito

Caso 2

Elemento que se queda pegado al borde superior de la ventana

Este elemento está en su posición hasta que el scroll le alcanza y entonces queda pegado arriba.

Fin del documento

Relleno para tener espacio de scroll suficiente

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure, magni, quo. Porro, iusto facilis repellendus, eligendi voluptatum assumenda sed provident nesciunt eveniet odio quos dignissimos hic, dolores eum ad consequuntur.
Quam dolores, at aut, quia, culpa rem aliquid perferendis error, sed animi dolor eos. Inventore itaque neque nobis nemo, voluptate eveniet et minima tempora beatae voluptas. Libero cum, tempora vero.
Eligendi sequi cumque non soluta tempore eum sapiente rem officiis inventore, numquam optio rerum sed. Dolore nulla quas quisquam excepturi adipisci beatae, laborum odit nesciunt reprehenderit libero accusamus, eos voluptates.
Porro a esse repudiandae quam deserunt dolorem itaque, nobis natus, aliquid provident iste modi quis. Facere ratione amet nisi, pariatur dolorem non quia in vero eius sequi. Molestiae perspiciatis, nam!
Dolorem libero, fugit distinctio nobis adipisci vero architecto id accusamus quos. Fugit aut, harum commodi aliquam, corporis ullam non quisquam modi provident itaque mollitia, laboriosam accusamus quae in maiores. Atque!
In harum, consequatur modi deserunt fuga excepturi enim laudantium. Praesentium iure itaque nobis quae. Exercitationem magnam neque eius omnis rerum voluptates quas laudantium nemo eum. Eum dolorum laudantium, hic explicabo.
Recusandae, tempore, fuga. Nostrum repellat quae totam ratione, soluta cupiditate, voluptas modi architecto. Porro sint earum unde hic quasi consectetur, voluptatum, quod voluptatibus nobis, veritatis ab! Dolores expedita aliquam voluptatibus.
Incidunt saepe beatae delectus magni harum accusamus maiores repellendus vero consectetur ea aliquid consequuntur est esse eligendi deserunt quam ducimus aut voluptatibus rerum aliquam veniam at, quis sunt. Molestias, alias.
Corrupti ut, commodi totam reprehenderit hic modi minus aliquid similique impedit accusantium tempore atque, animi aspernatur, enim in. Quidem deserunt quia commodi. Illo cumque itaque pariatur, nam a iure ad.
Voluptatum eius harum error quas veniam iste, velit et atque consequatur nemo labore. Veritatis omnis culpa expedita itaque commodi cumque placeat laborum laudantium nihil quaerat. Optio eos quas natus suscipit.
Quibusdam a aut dignissimos, ipsum porro rem sequi delectus hic quidem enim dolore pariatur in adipisci fuga aliquid praesentium vitae incidunt atque optio quae corporis cupiditate, impedit, facere officia aspernatur!
Perspiciatis consectetur eveniet vero consequuntur accusamus quidem maiores modi quis nulla laboriosam illo in esse quae doloremque, numquam praesentium delectus cum voluptatum repudiandae mollitia unde ea. Aliquid natus laudantium fugit.
Pariatur obcaecati placeat dignissimos inventore ipsa quos ullam facere debitis dolorem qui quo quaerat eos eaque tempora culpa voluptatibus est iure corrupti ea reiciendis aliquid sequi a, nesciunt doloremque. Repellendus.
Magnam quos repudiandae iusto debitis magni animi ea accusamus, iure unde atque voluptatem vel. Qui soluta, fugiat, id quod nihil veritatis rem commodi delectus alias ducimus possimus nisi voluptas sequi!
Nemo autem ut quia sequi labore illo dolore facilis fuga alias optio. Cum accusantium optio quaerat repellendus suscipit. Maxime voluptas corrupti quas aut omnis ad dolores deserunt porro doloremque. Nostrum.
Delectus illum, explicabo sunt omnis maiores nihil ut magnam minima, non perferendis, modi voluptas illo laboriosam aspernatur, sequi commodi vitae quisquam ipsa maxime. Natus illum provident minus doloribus esse nam.
Dolore, ex nesciunt. Sit inventore facere, dolore aliquid quod commodi, illo asperiores hic assumenda praesentium eveniet debitis temporibus eos! Harum dolores dolor possimus itaque quam perferendis est natus fugiat modi?
Aliquid adipisci, laboriosam repudiandae praesentium quod nostrum quam. Modi sequi debitis provident autem nostrum iure, quia assumenda accusantium, quos quisquam culpa est sint maxime! Repellat reprehenderit officiis corporis, odio sequi.
Voluptatem, iure molestiae rerum sequi eligendi rem necessitatibus adipisci asperiores autem quis ex minima temporibus vitae libero! Commodi tenetur at molestiae aliquid omnis, reprehenderit, magnam ipsa alias culpa, libero sunt.
Adipisci neque temporibus cum laudantium vitae magni facere expedita mollitia quae ratione repellat accusamus dicta, nisi ea perspiciatis enim hic provident ipsa sapiente quod sequi! Atque dicta, illum vero esse.
Ipsum iste maiores illum excepturi alias eaque laboriosam recusandae dolorum veniam nihil itaque dolores rerum, sint asperiores ducimus dolorem eum laudantium. Adipisci aspernatur aut cupiditate cumque quidem enim officia, quia!
Obcaecati totam vero, corporis, vitae consequatur voluptate ab quibusdam labore eum optio amet harum fugiat tenetur doloribus distinctio. Libero sed quas excepturi nisi odit earum itaque, vero rerum inventore tenetur.
Doloremque quo adipisci odio reprehenderit illum enim consequuntur magnam deserunt, expedita a, optio necessitatibus sint provident. Qui autem at, hic omnis, officia, facilis illo numquam amet delectus similique quisquam quae!
Fugit laudantium dolor a magni porro vero commodi qui assumenda quaerat, error suscipit eum nisi perspiciatis. Eos beatae, quo reiciendis sed sit, quas temporibus, ipsa enim ducimus magni deleniti vitae!
Autem laudantium, adipisci nulla porro maiores fuga, pariatur corporis ullam reiciendis! Odio earum vero unde laudantium praesentium beatae doloribus aperiam, harum sunt corporis molestias aspernatur facere repellendus aliquid vitae neque?