Cómo crear un elemento pegajoso en HTML

Para mejorar la apariencia general de una página web, los elementos agregados deben colocarse en consecuencia. Específicamente, el CSS "posiciónLa propiedad establece el posicionamiento de un elemento en un documento. La ubicación está establecida por las propiedades derecha, izquierda, superior e inferior. Sin embargo, la posición predeterminada de los elementos es estática, en la que los elementos residen con el flujo normal de la página.

Este blog discutirá la propiedad de posición CSS y el método para crear un elemento pegajoso en HTML.

¿Cuál es la propiedad de posición CSS??

La propiedad de posición CSS especifica el método de posicionamiento de los elementos HTML, que puede ser un absoluto, pegajoso, estadístico, fijo, heredado, relativo o inicial.

Sintaxis

Posición: Sticky | Absoluto | estático | fijo | relativo | heredar | inicial

La sintaxis dada anteriormente muestra que la propiedad de posición tiene valores diferentes. Se pueden asignar en consecuencia.

Ahora, veremos el procedimiento para crear elementos pegajosos en HTML.

¿Qué es la posición de CSS? Sticky?

El elemento html con un "pegajoso"La posición tiene una posición relativa hasta que alcanza un punto y luego actúa como un elemento pegajoso.

Pasemos por el simple ejemplo para comprender el concepto de posición pegajosa CSS.

Ejemplo: cómo crear un elemento pegajoso en html?
En el archivo HTML, agregue

para el encabezado,

para el párrafo, y tener el nombre de clase "pegajoso". Entonces, agregue un

Etiqueta que tiene una lista ordenada

con una lista
1. .

   Nota: Hemos tomado una lista larga para que al desplazar nuestra página, pueda observar el comportamiento del elemento pegajoso.

   Html

   Notas pegajosas: ver el efecto del elemento pegajoso

   
   

   Posición: pegajoso

   
   Esta es mi lista de tareas pendientes!
   

   
   

   
   
   1. Gestor de llamadas
   
   
   2. Reunión con empleados
   
   
   3. Enviar reporte
   
   
   4. Ve al doctor
   
   
   5. Reservar un vuelo
   
   
   6. Ir a caminar.
   
   
   7. Ir por el supermercado.
   
   
   8. Ver la televisión
   
   
   9. Algún texto.
   
   
   10. Algún texto.
   
   
   11. Algún texto.
   
   
   12. Algún texto.
   
   
   13. Algún texto.
   
   
   14. Algún texto.
   
   
   15. Algún texto.
   
   
   16. Algún texto.
   
   
   17. Algún texto.
   
   
   18. Algún texto.
   
   
   19. Algún texto.
   
   
   20. Algún texto.
   
   
   21. Algún texto.
   
   
   22. Algún texto.
   
   
   23. Algún texto.
   
   
   24. Algún texto.
   
   
   25. Algún texto.
   
   
   26. Algún texto.
   
   
   27. Algún texto.
   
   
   28. Algún texto.
   
   
   29. Algún texto.
   
   
   30. Algún texto.
   
   
   
   

   A continuación, proporcionaremos estilo al Div llamado Sticky:

   • Aquí, ".pegajoso"Representa la clase en la que se deben aplicar las propiedades de estilo.
   • Dentro de los soportes rizados, asignaremos el "posición"Valor de propiedad como"pegajoso".
   • El "arriba"Está configurado como"0".
   • El "color de fondo" es "#00154F".
   • Dar algo "relleno"Al DIV estableciendo su valor como"40px".
   • "tamaño de fuente" como "30px".
   • "color"De las fuentes se establece como"blanco".

   CSS

   .pegajoso
   Posición: pegajoso;
   arriba: 0;
   Color de fondo: #00154F;
   relleno: 40px;
   tamaño de fuente: 30px;
   color blanco;
   

   Guarde el archivo HTML y ábralo en el navegador para ver la salida:

   Consejo de bonificación

   Utilizando el "hsla ()Método ", puede establecer un fondo transparente para el elemento adhesivo agregado de la siguiente manera:

   Color de fondo: HSLA (0, 100%, 90%, 0.8);

   Producción

   Así es como el elemento se adhiere a la posición específica estableciendo el CSS "posición"Valor de propiedad como"pegajoso".

   Conclusión

   El "pegajoso"Posición en CSS, hace que la posición del elemento se alinee entre relativa y fija. Como resultado, el elemento pegajoso agregado se coloca en relación con el pergamino hasta que alcanza un cierto punto cuando se comporta como un pegajoso. También puede ajustar el nivel de transparencia del elemento pegajoso agregado utilizando el método hsla (). Este blog te guió sobre hacer elementos transparentes simples y pegajosos.