Dominar la propiedad position en CSS es fundamental para controlar la ubicación de los elementos en una página web. Comprender las diferencias entre relative, absolute, fixed y sticky permite construir interfaces precisas y profesionales, desde barras de navegación fijas hasta listas con encabezados adherentes.
¿Cómo funcionan position relative y absolute juntos?
La propiedad position en CSS determina cómo se ubica un elemento dentro de su contexto. Existen varios valores posibles: relative, absolute, fixed, sticky, static, initial e inherit [0:20].
Para entender relative y absolute, se parte de una estructura básica: un div contenedor con clase container y un elemento hijo con clase area [0:35].
- Position relative permite mover un elemento respecto a su posición original usando las propiedades complementarias top, right, left y bottom [1:10].
- Al aplicar
position: relative y un top: 20px, el elemento se desplaza veinte píxeles hacia abajo desde su contenedor, en este caso el body [1:30].
El valor position absolute funciona de manera diferente. Cuando un elemento hijo tiene position: absolute, este se posiciona respecto al elemento contenedor relativo más cercano [2:20]. Por ejemplo, al colocar right: 0 en el hijo absoluto, este se desplaza al borde derecho del contenedor y no al borde derecho de toda la página [2:30]. Esta relación entre padre relativo e hijo absoluto es una de las combinaciones más utilizadas en maquetación CSS.
¿Para qué sirve position fixed en una barra de navegación?
El valor position fixed mantiene un elemento completamente estático en la pantalla sin importar el scroll del usuario [3:00]. Para demostrarlo, se crea un elemento nav con un ancho del cien por ciento y una altura de sesenta píxeles, medidas comunes para una barra de navegación [3:15].
Para observar el efecto, se necesita contenido suficiente que genere desplazamiento vertical. Se utiliza texto Lorem Ipsum para llenar la página y activar el scroll [3:50].
- Al aplicar
position: fixed al nav, este se queda pegado en su posición sin moverse cuando el usuario hace scroll [4:15].
- El nombre fixed describe exactamente su comportamiento: el elemento permanece fijo donde se le indica.
Un detalle importante es el orden de las etiquetas HTML. Si el nav se coloca después de otros elementos en el código, puede quedar visualmente debajo de ellos. La recomendación es que el orden del HTML refleje la representación visual deseada en pantalla [4:40]. El navbar debe ir primero en la estructura, seguido del resto del contenido.
¿Qué hace especial a position sticky?
El valor position sticky combina comportamientos de relative y fixed. Un elemento con este valor se comporta de forma normal hasta que el scroll lo lleva a una posición determinada, momento en el cual se adhiere a la pantalla [5:25].
Para el ejemplo se crean listas ul con títulos como "Frutas" y elementos como manzana, pera y sandía [5:35]. Al aplicar position: sticky junto con top: 0 a los párrafos dentro del ul, cada título se pega en la parte superior de la ventana al hacer scroll [6:05].
- Cuando el siguiente título llega a la parte superior, reemplaza al anterior, creando un efecto de transición entre secciones [6:30].
- Sticky requiere elementos hermanos que también tengan esta propiedad. No funciona de forma aislada porque necesita saber a quién cederle el lugar en la parte superior [6:45].
¿Qué significan static, initial e inherit en position?
Estos tres valores completan el abanico de opciones de posicionamiento [7:00].
- Static es el valor por defecto de todos los elementos. No aplica ningún desplazamiento especial.
- Initial restablece la posición al valor original, útil cuando ya se ha modificado el position y se quiere volver al estado inicial.
- Inherit hereda el valor de position del elemento padre.
Cada valor de position se complementa con las propiedades top, right, bottom y left, que definen la distancia respecto al punto de referencia correspondiente. Entender esta relación es clave para lograr ubicaciones precisas.
Si ya pusiste en práctica estos ejemplos, comparte en los comentarios cómo te fue al heredar un posicionamiento con inherit desde un elemento padre. También cuéntanos cómo quedó tu ejercicio con sticky y las listas.
