Guía completa y práctica sobre posicionamiento CSS: Position fixed

#css #html #spanish #latam

¡Hola gente bonita!👋

En el articulo anterior explique el posicionamiento absoluto, en esta ocasión voy a explicar el posicionamiento fijo o position: fixed.

Este tipo de posicionamiento es muy usado cuando diseñamos un sidebar, navbar, una ventana de dialogo, un overlay o cuando queremos hacer que un botón este fijo en la pagina web y que cuando el usuario haga click sobre el, lo regrese a la parte superior.

El posicionamiento fixed hace que un elemento se coloque respecto al viewport, Le dices dónde posicionarse al elemento, y se queda ahí mientras el usuario hace scroll. El elemento no conserva su espacio en el flujo, todo el espacio que tuviera reservado ese elemento desaparece.

↕️↔️ top, right, bottom, left

Las coordenadas top, right, bottom y left siempre son relativas a la ventana del navegador.

Al principio, cuando solo añades el valor fixed, el elemento se quedara en la posición inicial, pero cuando le agregas las coordenadas el elemento se coloca respecto a la ventana del navegador.

Como puedes darte cuenta las características mencionadas sobre el posicionamiento fijo son casi las mismas que la del posicionamiento absoluto con la excepción de que con el valor fixed, el elemento se queda en el lugar que le has indicado, esto quiere decir que cuando el usuario hace scroll en el sitio web el elemento se queda fijo o "pegado" de ahí el nombre.

Al posicionamiento fijo no le importa si hay un contenedor cercano que esta posicionado, porque el elemento jamás se colocara respecto a el, sino solo a la ventana del navegador.

Ejemplo 1️⃣

El ejemplo mas común es hacer un menú horizontal fijo.

<header class="header">
    <img class="logo-img" src="https://unsplash.it/40" alt="" />
         <nav class="nav">
            <ul class="menu">
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Blog</a></li>
            </ul>
         </nav>
 </header>


header {
    position: fixed;
    top: 0;
    width: 100%;
    height: 5rem;
    padding: 0 3em;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: rgba(255, 255, 255, 0.5);
}

.menu {
    margin-top: 0;
    margin-bottom: 0;
    padding-left: 0;
    list-style: none;
    display: flex;
    gap: 2em;
}

El problema es que el elemento pierde su espacio reservado en el flujo y esto hace que el menú se coloque encima de el texto (no lo empuja), esto puede solucionarse agregando al body la propiedad padding-top o bien margin-top o al elemento que contiene el texto la propiedad padding-top o margin-top.

Hay que tener cuidado con el posicionamiento fijo ya que puede cubrir algunos elementos, ocultándolos de la vista. A veces no es un gran problema en el escritorio, pero cuando estas en un dispositivo móvil y el espacio de la pantalla es limitado, esto puede causar problemas.

Aportes de la comunidad

Me ha encantado este CodePen de Steve Gardner donde nos muestra de forma divertida una pagina con un scroll infinito.

📋 Conclusión

☑️ El elemento es posicionado respecto al viewport.
☑️ Al posicionar el elemento como fixed se habilitan las propiedades top, right, bottom, left y z-index.
☑️ La posición fija es muy usada cuando se hacen menús de navegación. Lo usamos cuando un elemento debe estar siempre en el mismo lugar de la página en todo momento. Simplemente no se mueve.
☑️ El elemento no conserva su espacio en el flujo, todo el espacio que se tuviera considerado para ese elemento desaparece.
☑️ Las dimensiones del elemento se adaptan al contenido, excepto que se haya definido su tamaño con width o height.
☑️ Los elementos posicionados de forma fija no pueden moverse de su lugar y se colocan encima de otros elementos.