position
Indica si un elemento estará posicionado en un lugar estático, relativo, absoluto o fijo dentro de la página. Es una de las propiedades más cruciales en CSS para controlar la colocación exacta de los elementos. Permite sacar un elemento del flujo normal del documento y posicionarlo de diversas maneras.
- static: Valor por defecto. El elemento se posiciona donde la página lo dibuje de forma natural. En este caso no sirven las propiedades top, bottom, right y left que veremos más adelante.
- relative: Parecido al anterior pero deja que desplacemos al elemento con las propiedades top, bottom, right y left que veremos más adelante.
- absolute: El elemento se posiciona en una capa superior, por encima del resto de elementos. Al contrario que en la posición relative, el hueco que ocupaba pasa a estar libre (como si se fuera a otra dimensión). Para moverlo tenemos 2 opciones:
- ◦ top, left, right, bottom: El elemento se mueve a partir de las coordenadas 0,0 de la página web. Es muy parecido al efecto que se da con la posición fixed pero el elemento no bajaría con el scroll.
- ◦ margin: Si lo movemos con margin, el elemento se moverá a partir de la posición que ocuparía originalmente. Esto lo hace mucho más parecido al comportamiento de relative, pero sin dejar ocupado el hueco original.
- fixed: El elemento se posiciona en las coordenadas indicadas con las propiedades top, bottom, right y left, dentro de la ventana del navegador. Aunque hagamos scroll , el elemento se mantiene en las coordenadas indicadas.
- sticky: Permite que un elemento se comporte como un elemento con position: relative hasta que su contenedor empieza a desaparecer de la pantalla al hacer scroll. En ese momento, el elemento se "pega" y se comporta como si tuviera position: fixed, permaneciendo visible en una ubicación específica del viewport (la parte visible de la ventana del navegador). Es decir, un elemento con position: sticky alterna entre ser relativo y fijo dependiendo de la posición del scroll del usuario.
position: static (valor por defecto)
<div class="caja-static">No hace nada, valor por defecto</div>
<div class="caja-normal">Yo estoy en mi sitio.</div>position: relative (Posicionamiento relativo)
El elemento se posiciona relativo a su posición normal en el flujo del documento. Mantiene su espacio original, pero se puede desplazar usando top, bottom, left o right.
<div class="caja-relative">Estoy 20px a la derecha y abajo</div>
<div class="caja-normal">Yo estoy en mi sitio.</div>position: absolute (Posicionamiento absoluto)
El elemento es sacado completamente del flujo normal del documento. Se posiciona relativo a su ancestro posicionado más cercano (cualquier padre con position: relative, absolute, fixed o sticky). Si no encuentra un ancestro posicionado, se posiciona respecto al body.
<div class="contenedor-relativo">
Contenedor Padre (relative)
<div class="caja-absolute">¡Estoy en la esquina de mi padre!</div>
</div>position: fixed (Posicionamiento fijo)
El elemento es sacado del flujo y se posiciona respecto a la ventana del navegador (viewport). Permanece en su posición incluso cuando el usuario se desplaza (scrolling).
<div class="caja-fija">
¡Soy una caja fija!
</div>
<h1>Ejemplo de <code>position: fixed</code></h1>
<p>Haz scroll hacia abajo para ver cómo la caja verde se mantiene en su sitio.</p>
<p>El elemento con <code>position: fixed</code> es retirado del flujo normal del documento. Esto significa que no ocupa espacio y otros elementos se comportarán como si no estuviera ahí.</p>
<p>Por eso, se posiciona relativo a la ventana gráfica del navegador (el viewport).</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eget leo id sem tempor dapibus. Proin eget quam at nunc consequat tincidunt. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc.</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.</p>
Este es el valor que se usa típicamente para las barras de navegación que se mantienen visibles o botones de chat/ayuda.
Position: sticky (Posicionamiento "pegajoso")
El elemento se comporta como relative hasta que alcanza un punto de desplazamiento (scroll) definido por ti, momento en el que se comporta como fixed.
Es muy útil para encabezados de seción que "se pegan" a la parte superior de la pantalla.
<div style="height: 1000px;">Área de contenido...</div>
<div class="caja-sticky">¡Me pego al pasar!</div>
<div style="height: 1000px;">Más contenido para desplazar...</div>Más ejemplos aquí