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.
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.
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.
<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:
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.
<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
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).
<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:
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!!
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.
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:
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
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;
}
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 elemento sticky debe tener definida la posición top con cualquier valor.
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:
Elemento que se queda pegado al borde superior de la ventana