Hay innumerables propiedades en CSS que le permiten controlar la apariencia de su sitio web. La propiedad float de CSS le permite envolver texto alrededor de imágenes, por ejemplo. La propiedad CSS font-size le permite controlar el tamaño del texto. La propiedad Importante de CSS le permite anular todas las demás reglas de estilo en CSS.
Otro ejemplo común es la propiedad CSS Item. Esta propiedad permite posicionar elementos HTML para crear diseños perfectos. Ya sea que esté creando su sitio desde cero o utilizando una plataforma de desarrollo como Bootstrap CSS, esta propiedad puede ahorrarle tiempo y evitar posibles problemas de alineación a medida que crece su proyecto.
Hay muchos tipos de posiciones, incluido el posicionamiento estático, relativo, fijo, absoluto y fijo. En esta publicación, veremos el último tipo de posición para que pueda crear elementos fijos en sus páginas web. Empecemos.
¿Qué es CSS: pegajoso?
De forma predeterminada, los elementos HTML son estáticos. Esto significa que se muestran en la página tal como están en el flujo natural de HTML. Sin embargo, si un elemento se define con una posición fija de CSS, su posición cambiará a medida que el usuario se desplace.
En CSS, el posicionamiento fijo tiene las características de posicionamiento relativo y constante. El elemento adhesivo se coloca en relación con su posición de inicio en el flujo HTML hasta que supera un determinado umbral en el área visible (es decir, el usuario se desplaza más allá de un determinado punto de la página). En este punto, el elemento se mantiene en su lugar como un elemento estacionario hasta que alcanza el límite de su elemento principal. Este punto de compensación se define especificando arriba, a la derecha, abajo o a la izquierda en la propiedad de posición de CSS.
Aquí hay un ejemplo de la sintaxis de una posición fija en CSS:
.example {
position: sticky;
top: 0;
}
Tenga en cuenta que la posición fija tiene algunos problemas de compatibilidad con el navegador. Internet Explorer y Edge 15 (y versiones anteriores) no admiten este tipo de elementos. Safari sí, pero requiere el prefijo «webkit». Lo veremos en el primer ejemplo.
Ahora veamos algunos ejemplos del uso del posicionamiento fijo a continuación.
Cómo crear un elemento HTML pegajoso
Suponga que tiene el nombre de su sitio web arriba de la barra de navegación en la página de inicio. Cuando el usuario se ha desplazado lo suficiente hacia abajo en la página para que la barra de navegación esté en la parte superior de la pantalla, desea que la barra de navegación permanezca constante a 10 píxeles de la parte superior.
Aquí está el código HTML con mucho texto ficticio para ver más claramente el efecto del posicionamiento fijo:
<div>
<h1>CSS Position: Sticky Example</h2>
</div>
<div class="stickyexample">
<p> After you scroll past its offset point, this element will stick 10 pixels from the top of the viewport.<p>
</div>
<div class="container-fluid">
<h2>Let's scroll up and down the page...</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
Este es el CSS que usará para crear un elemento verde lima
que pega 10 píxeles desde la parte superior de la pantalla en Safari (más algunas propiedades de margen y relleno para que el diseño sea más agradable).
Esto significa que solo necesita agregar una herramienta de acceso directo a Sticky Positioning en HTML y especificar qué tan lejos de la parte superior, inferior, izquierda o derecha desea que se pegue el elemento CSS. Si está utilizando la clase .sticky-top, no necesitará agregar nada a su CSS.
Supongamos que desea crear una barra de navegación superior pegajosa de Bootstrap. Para empezar, aquí está el código HTML para crear una barra de navegación Bootstrap (sin posicionamiento definido). Tendrá un fondo azul con la etiqueta «información», algunos enlaces de navegación falsos a páginas de funciones y precios, y un pequeño punto de interrupción.
Dado que no se ha definido ningún posicionamiento, la barra de navegación sería estática por defecto. Esto es lo que sería en el frente de la página de Bootstrap:
Para hacer que la barra de navegación se adhiera a la parte superior de la ventana gráfica, simplemente agregue la herramienta .sticky-top como el nombre de clase del elemento
