Entendiendo el posicionamiento absoluto de elementos HTML con CSS
Tags: webdev, css, spanish
Published: 2020-10-07 10:34:46

---
title: Entendiendo el posicionamiento absoluto de elementos HTML con CSS
published: true
tags: WebDev, CSS, Spanish
canonical_url: https://www.campusmvp.es/recursos/post/entendiendo-el-posicionamiento-absoluto-html-css.aspx
cover_image: https://www.campusmvp.es/recursos/image.axd?picture=/2018/4T/position-absolute-css/posicionamiento-absoluto-html-css.png
---

>Este artículo fue escrito por [Pablo Iglesias](https://twitter.com/piglesias) en el [blog de campusMVP](https://www.campusmvp.es/recursos/post/entendiendo-el-posicionamiento-absoluto-html-css.aspx)

El comportamiento de un elemento con `position:absolute;` quizá te puede parecer errático de entrada, especialmente si no tienes suficiente experiencia maquetando con CSS y no conoces el detalle fundamental que te voy a contar en este post. Así que, si alguna vez te has desesperado al intentar posicionar un elemento de forma absoluta, mejor sigue leyendo.

Pero empecemos por el principio. La propiedad `position`, tal y como su propio nombre indica, define cómo se va a posicionar un elemento.

Por defecto su valor es `static` y sigue el flujo normal del documento, esto es, que se va colocando de arriba a abajo y de izquierda a derecha en función de si es un elemento de línea o bloque, y del espacio y de los elementos que encuentren antes que él.

Pero también puede tomar otros valores, que pueden ser: `relative`, `absolute`, `fixed` o `sticky.`

A partir de que se haya definido su posicionamiento, su posición exacta se puede modificar usando las propiedades `top`, `bottom`, `left` y `right`, que harán que se desplace como en un sistema de coordenadas.

## Un ejemplo probando `position`

Ahora veremos un ejemplo práctico donde lo entenderemos todo mejor:

Tenemos cuatro divs, y dentro del último, un enlace con la clase `.logo` que alberga una imagen que es el logo de campusMVP. Los cuatro con `position:static;`, que es el valor que el navegador le aplica por defecto a cualquier elemento:

```
\<div class="div1"\> \<h2\>Div 1\</h2\> \<div class="div2"\> \<h2\>Div 2\</h2\> \<div class="div3"\> \<h2\>Div 3\</h2\> \<div class="div4"\> \<h2\>Div 4\</h2\> \<a class="logo" href="https://www.campusmvp.es"\> \<img src="img/logo-campusmvp.png" alt="logo de campusmvp"/\> \</a\> \</div\> \</div\> \</div\> \</div\>
```

![Ejemplo inicial donde todos los elementos son static](https://www.campusmvp.es/recursos/image.axd?picture=/2018/4T/position-absolute-css/posicionamiento-css.png)

Ahora posiciono el enlace del logo como absoluto en las coordenadas 0,0 arriba a la izquierda, a ver qué pasa:

```
a.logo {
	position:absolute;
	top:0;
	left:0;
}
```

Vemos que se ha colocado en las coordenadas 0,0 con respecto a la ventana del navegador:

![Ejemplo de position:absolute; con ancestros static](https://www.campusmvp.es/recursos/image.axd?picture=/2018/4T/position-absolute-css/posicionamiento-absoluto-css.png)

## Probamos a aplicarle a un `div ``position:relative;`

Ahora bien, ¿qué pasa si le pongo al `.div1` un `position: relative;`?:

```
.div1 {
	position:relative;
}
```

 

![Ejemplo de position:absolute; y contenedor position:relative;](https://www.campusmvp.es/recursos/image.axd?picture=/2018/4T/position-absolute-css/position-relative-div1.png)

Mmmm, interesante. Se posiciona respecto a él.

## `Position: fixed;`

¿Y si le ponemos al `.div2` un `position: fixed;`?:

   

```
.div2 {
	position:fixed;
}
```

![Ejemplo de position:absolute; y un ancestro position:fixed;](https://www.campusmvp.es/recursos/image.axd?picture=/2018/4T/position-absolute-css/position-fixed-div2.png)

¡Vaya! Ocurre lo mismo con este.

## `Position: absolute;`

Otro más, ahora le ponemos al `.div3` un `position: absolute;`

 

```
.div3 {
	position:absolute;
}
```

![Ejemplo de position:absolute; y un ancestro position:absolute;](https://www.campusmvp.es/recursos/image.axd?picture=/2018/4T/position-absolute-css/position-absolute-div3.png)

También se posiciona el logo respecto a él.

## `Position: sticky;`

Y para rematar, le ponemos al `.div4` un `position: sticky;`

```
.div4 {
	position:sticky;
}
```

![Ejemplo de position:absolute; y un ancestro position:sticky;](https://www.campusmvp.es/recursos/image.axd?picture=/2018/4T/position-absolute-css/position-sticky-div4.png)

De nuevo ocurre lo mismo.

## En conclusión...

Pues bien, parece que hemos averiguado que nuestro logo con `position: absolute;` se posicionará **en función de su ancestro más cercano que tenga un valor distinto a `static`**. O lo que es lo mismo, **que esté posicionado**  (se le llama así, si no es static se dice que está posicionado). Y si no encuentra ningún ancestro posicionado, se colocará en función de la ventana del navegador.

Esta es la norma general. En la práctica, la fórmula que más se usa es ponerle `position:relative;` al contenedor del elemento que queremos posicionar en absoluto, porque es la que menos problemas de posicionamiento con el resto de elementos te va a dar. Sin embargo este tema tiene más sutilezas que debes controlar (sistemas de referencia, unidades, colapso de elementos, flotaciones...) y que se explican con detalle en nuestro [curso online de online de HTML5 y CSS3](https://www.campusmvp.es/recursos/catalogo/Product-HTML5-y-CSS3-a-fondo-para-desarrolladores_185.aspx).

Espero haberte aclarado un poco el panorama. [Aquí te dejo el ejemplo](https://www.campusmvp.es/recursos/Descargas/ejemplo-posicionamiento-absoluto-CSS_campusMVP.zip) para que sigas jugando tú con él, o mejor aún, créate tu propio ejemplo.

La maquetación web no es difícil, pero está llena de sutiles _trampas_ como esta. Si quieres aprender a evitarlas con conocimientos sólidos, échale un vistazo al curso anterior y, si ya dominas los fundamentos de HTML y CSS, seguro que te puede interesar [**aprender en serio cómo hacer maquetación _Responsive_ con HTML5, Flexbox, CSS Grid y Bootstrap**](https://www.campusmvp.es/recursos/catalogo/Product-Maquetaci%C3%B3n-Responsive-con-HTML5,-Flexbox,-CSS-Grid-y-Bootstrap_212.aspx).