Este artículo demostrará las utilidades que se pueden utilizar para controlar la ubicación de elementos posicionados en la página web.
¿Utilidades Tailwind utilizadas para controlar la ubicación de elementos posicionados?
La utilidad Tailwind CSS que se ocupa específicamente de la colocación de elementos posicionados tanto en el eje horizontal como en el vertical es “ Arriba | Derecha | Abajo | Izquierda ”. Al igual que otras utilidades, también proporciona varias clases que pueden configurar el elemento posicionado en varios lugares; algunas de estas clases se detallan a continuación:
- inserto-{placementValue}
- inicio-{placementValue}
- arriba-{placementValue}
- fin-{placementValue}
- abajo-{placementValue}
- izquierda-{placementValue}
- derecha-{placementValue}
Ahora, tengamos un ejemplo práctico para usar algunas de estas clases para una mejor comprensión.
Ejemplo: colocación de un elemento posicionado mediante las utilidades CSS de Tailwind
En este ejemplo, se utilizará la utilidad descrita anteriormente para colocar el elemento posicionado en diferentes lugares de una página web, como se muestra a continuación:
< cuerpo clase = 'cuadrícula grid-cols-3' >
< división clase = 'relativo h-32 w-32 bg-naranja-200 p-4 m-4 texto-centro justificar-estirar redondeado' >
< división clase = 'izquierda absoluta-0 arriba-0 h-16 w-16 bg-azul-400 redondeado p-4' > Artículo 1 < / división >
< / división >
< división clase = 'relativo h-32 w-32 bg-naranja-200 p-4 m-4 texto-centro justificar-estirar redondeado' >
< división clase = 'inserción absoluta-x-0 top-0 h-16 bg-blue-400 redondeado p-4' > artículo 2 < / división >
< / división >
< división clase = 'relativo h-32 w-32 bg-naranja-200 p-4 m-4 texto-centro justificar-estirar redondeado' >
< división clase = 'inserto absoluto-0 bg-azul-400 redondeado p-4' > artículo 3 < / división >
< / división >
< división clase = 'relativo h-32 w-32 bg-naranja-200 p-4 m-4 texto-centro justificar-estirar redondeado' >
< división clase = 'inserto absoluto-y-0 derecha-0 w-16 bg-azul-400 redondeado p-4' > artículo 4 < / división >
< / división >
< división clase = 'relativo h-32 w-32 bg-naranja-200 p-4 m-4 texto-centro justificar-estirar redondeado' >
< división clase = 'absoluto abajo-0 derecha-0 h-16 w-16 bg-azul-400 redondeado p-4' > Artículo 5 < / división >
< / división >
< / cuerpo >
Descripción del código anterior:
- Primero, cree cinco padres ' división ”elementos y aplicar varias clases CSS de Tailwind para establecer la posición relativa, altura, ancho, fondo, relleno, margen, etc.
- A continuación, cree un anidado ' división 'elemento dentro de cada padre' div '. La ubicación se realizará para este elemento 'div' anidado.
- Luego, aplique las clases CSS de viento de cola de ' absoluto ”, “ h ”, “ En ”, “ bg ”, ” pag ', y ' redondeado 'para darle estilo al anidado' división ' elemento.
- Después de eso, comenzando desde el div anidado uno al cinco, asigne nuevas clases de ' izquierda-0 arriba-0 ”, “ inserción-x-0 ”, “ recuadro-0 ”, “ inserción-y-0 derecha-0 ', y ' abajo-0 derecha-0 ”respectivamente.
- Estas clases establecen la posición de los elementos div anidados en la esquina superior izquierda, cubren la posición superior, cubren todo el espacio principal, cubren el lado derecho y cubren la posición inferior izquierda respectivamente.
Después de la ejecución, la vista previa de los elementos div se ve así:
El resultado muestra que los elementos posicionados se colocan en las posiciones deseadas.
Conclusión
El ' Arriba | Derecha | Abajo | Izquierda La utilidad Tailwind se utiliza para controlar la ubicación de elementos en la página web. Utiliza varias clases para apuntar a cada posición y luego mueve el elemento seleccionado a ese lugar según los requisitos. Estas clases colocan principalmente los elementos posicionados a la izquierda, derecha, abajo y arriba. Pueden ayudar a cubrir toda el área, cubrir direcciones específicas como izquierda o arriba, etc. Este artículo ha explicado con éxito las utilidades que se pueden utilizar para controlar la ubicación de elementos posicionados.