Lo más importante al diseñar páginas web es el posicionamiento adecuado de los elementos. Esto se puede hacer fácilmente utilizando las clases de “posición” de Tailwind. El posicionamiento puede ser de diferentes tipos uno de ellos es estático.
Este blog demostrará cómo posicionar estáticamente el elemento.
¿Cómo posicionar estáticamente un elemento en DOM – Tailwind?
Un elemento se puede posicionar estáticamente usando el botón “ estático ”clase de puesto. La posición estática es la posición predeterminada para los elementos HTML. Los elementos con “ posición: estática ”se colocan según el flujo normal de la página, sin ningún estilo CSS.
Sintaxis
La sintaxis para aplicar “ estático 'la clase es:
Aquí, el elemento puede ser cualquier etiqueta a la que se le pueda aplicar un atributo de posición.
Visite el código para la implementación práctica del posicionamiento estático:
< cuerpo clase = 'centro de texto' >< centro >
< h1 clase = 'texto-verde-600 texto-5xl fuente-negrita' >
Ejemplo de posición estática
< / h1 >
< b >Clase de posición CSS de viento de cola< / b >
< div clase = 'texto estático-izquierda p-2 m-2 bg-verde-200 h-48' >
< pag clase = 'negrita' >Posicionado estáticamente< / pag >
< div >Elemento posicionado absoluto< / pag >
< / div >
< / div >
< / centro >
< / cuerpo >
En este código:
- “ centro de texto ”ajusta el contenido de las etiquetas al centro de la pantalla.
- Selecciona el ' ”etiqueta a verde usando el “ texto-verde-600 ”, el tamaño del texto se establece en cinco veces mediante “ texto-5×1 ' y la fuente se enfatiza usando el ' negrita ”.
- Dos ' 'También se crean elementos y se establece la posición estática del lado izquierdo para el primer ' div ' utilizando el ' texto estático a la izquierda ”.
- Asigna las clases de “ p-2 ”, “ m-2 ”, “ bg-verde-200 ”, “ h-48 'para el segundo div y también establezca su posición en la parte inferior izquierda absoluta usando el botón' relativo abajo-0 izquierda-0 ' clase.
Producción
Guarde el código anterior en el archivo y obtenga una vista previa de la página web creada por él, que se mostrará como:
El elemento colocado estáticamente se mueve con el flujo normal de la página mientras que el otro elemento conserva su posición absoluta.
Conclusión
Para posicionar un elemento estáticamente en el DOM con el flujo normal del documento, use el comando ' estático “clase del viento de cola” posición ' utilidad. Este blog ha mostrado cómo posicionar cualquier elemento” inactivamente ” con una sencilla demostración práctica.