Este blog discutirá la propiedad de posición de CSS y el método para crear un elemento adhesivo en HTML.
¿Qué es la propiedad de posición CSS?
La propiedad de posición de CSS especifica el método de posicionamiento de los elementos HTML, que puede ser absoluto, fijo, estadístico, fijo, heredado, relativo o inicial.
Sintaxis
posición : pegajoso | absoluto | estático | fijado | pariente | tu heredas | inicial
La sintaxis dada arriba muestra que la propiedad de posición tiene diferentes valores. Se pueden asignar en consecuencia.
Ahora, veamos el procedimiento para crear elementos fijos en HTML.
¿Qué es la posición CSS: pegajosa?
El elemento HTML con un ' pegajoso ” posición tiene una posición relativa hasta que llega a un punto y luego actúa como un elemento adhesivo.
Repasemos el ejemplo simple para comprender el concepto de posición fija de CSS.
Ejemplo: ¿Cómo crear un elemento adhesivo en HTML?
En el archivo HTML, agregue
para el encabezado,
para el párrafo y
que tenga una lista ordenada anidada
- con una lista
- .
Nota : Hemos sacado una larga lista para que al hacer scroll en nuestra página, puedas observar el comportamiento del sticky element.
HTML
< h2 > Notas adhesivas: vea el efecto del elemento adhesivo < / h2 >
< pags > posición: pegajosa < / pags >
< división clase = 'pegajoso' > ¡Esta es mi lista de tareas pendientes! < / división >
< pags >
< viejo >
< que > Gestor de llamadas < / que >
< que > Reunión con los empleados < / que >
< que > Enviar reporte < / que >
< que > Ve al doctor < / que >
< que > Reservar un vuelo < / que >
< que > Ir a caminar. < / que >
< que > Ir de comestibles. < / que >
< que > Mirar televisión < / que >
< que > Algún texto. < / que >
< que > Algún texto. < / que >
< que > Algún texto. < / que >
< que > Algún texto. < / que >
< que > Algún texto. < / que >
< que > Algún texto. < / que >
< que > Algún texto. < / que >
< que > Algún texto. < / que >
< que > Algún texto. < / que >
< que > Algún texto. < / que >
< que > Algún texto. < / que >
< que > Algún texto. < / que >
< que > Algún texto. < / que >
< que > Algún texto. < / que >
< que > Algún texto. < / que >
< que > Algún texto. < / que >
< que > Algún texto. < / que >
< que > Algún texto. < / que >
< que > Algún texto. < / que >
< que > Algún texto. < / que >
< que > Algún texto. < / que >
< que > Algún texto. < / que >
< / viejo >
< / pags >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 corchetes, asignaremos el ' posición ” valor de la propiedad como “ pegajoso ”.
- Los ' parte superior ” se establece como “ 0 ”.
- Los ' color de fondo ' es ' #00154f ”.
- Dar algo ' relleno ” al div estableciendo su valor como “ 40px ”.
- “ tamaño de fuente ' como ' 30px ”.
- “ color ” de fuentes se establece como “ blanco ”.
CSS
.pegajoso {
posición : pegajoso ;
parte superior : 0 ;
color de fondo : #00154f ;
relleno : 40px ;
tamaño de fuente : 30 píxeles ;
color : blanco ;
}Guarde el archivo HTML y ábralo en el navegador para ver el resultado:
Consejo de bonificación
Al utilizar el “ hsla() ”, puede establecer un fondo transparente para el elemento adhesivo agregado de la siguiente manera:
antecedentes - color : hsla ( 0 , 100 %, 90 %, 0.8 ) ;Producción
Así es como el elemento se adhiere a la posición específica configurando el CSS ' posición ” valor de la propiedad como “ pegajoso ”.
Conclusión
Los ' pegajoso ” en CSS, hace que la posición del elemento cambie entre relativa y fija. Como resultado, el elemento adhesivo agregado se coloca en relación con el desplazamiento hasta que llega a un punto determinado en el que se comporta como un adhesivo. También puede ajustar el nivel de transparencia del elemento adhesivo agregado utilizando el método hsla(). Este blog lo guió sobre cómo hacer elementos transparentes simples y pegajosos.