Posição do vento de cauda
Neste artigo, exploraremos as várias classes de posição Tailwind e como elas podem ser usadas para posicionar elementos em uma página da web.
Tailwind CSS fornece classes para elementos de posicionamento – A posição de um elemento é definida usando a classe de posição.
É possível usar essas classes para controlar a posição e o comportamento dos elementos em uma página.
Ao posicionar elementos com precisão em uma página da Web, você pode criar layouts e designs complexos.
Índice-
Classes de posição de vento de cauda
| Aulas | Visão geral |
| estático | Essa classe define o atributo de posição de um elemento como estático. Todos os elementos têm esse valor de posição como padrão. |
| fixo | Usando esta classe, o valor da posição de um elemento é definido como fixo. As posições dos elementos são relativas à viewport, portanto, mesmo que o usuário role, o elemento permanece no mesmo local. |
| absoluto | Nesse caso, o valor da posição de um elemento é definido como absoluto. A posição de um elemento é determinada por seu ancestral mais próximo. As posições dos elementos são relativas ao documento se nenhum ancestral tiver uma posição diferente de estática. |
| relativo | O valor da posição de um elemento é definido como relativo usando esta classe. Nesse caso, ele é posicionado em relação à sua posição normal na página. |
| pegajoso | Esta classe é usada para especificar a posição de um elemento como fixo. O elemento pode ser posicionado em relação à sua posição normal no fluxo do documento até que um determinado ponto de rolagem seja alcançado, ponto em que é fixado na viewport. |
Sintaxe
<element class="static">...</element>
Posições de vento de cauda: estático e relativo
A posição padrão de um elemento em HTML é estática . Isso significa que o elemento será posicionado com base em seu lugar no documento HTML.
O Tailwind fornece uma classe para posicionamento estático, chamada static . Essa classe pode ser usada para substituir quaisquer outras classes de posicionamento que possam ser aplicadas a um elemento.
O posicionamento relativo é um tipo de posicionamento em que um elemento é posicionado em relação à sua posição normal no documento HTML .
O Tailwind fornece uma classe para posicionamento relativo, chamada parente .
Essa classe pode ser usada para mover um elemento para cima, para baixo, para a esquerda ou para a direita de sua posição original.
O exemplo abaixo demonstra o uso de classes de posição estática e relativa no Tailwind:
Example:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<!DOCTYPE html>
src="https://cdn.tailwindcss.com"
class="m-3 text-center"
class="text-gray-700 text-2xl font-semibold"
MrExamples
class="my-2 font-semibold"Position class in Tailwind CSS
class="mt-4 bg-gray-200 w-full relative h-28 overflow-auto font-medium"
class="font-medium mb-4"Using static class
Class aptent taciti sociosqu ad litora torquent per conubia nostra,
per inceptos himenaeos. Fusce a eros eget quam porta lobortis.
class="w-fit static bg-gray-500 py-1 px-2"Static child
Aenean nec finibus nunc. Sed aliquet massa ut consequat semper.
Etiam eu diam sed sapien hendrerit blandit. Nullam vehicula nisi
a nulla dignissim commodo. Donec sed tempor risus, eu varius erat.
Nam vel nulla risus. Vivamus ornare convallis tincidunt. Quisque
in aliquam velit. Morbi scelerisque volutpat orci, ac viverra
nisl semper eget.
class="mt-4 bg-gray-200 w-full relative h-28 overflow-auto font-medium"
class="font-medium mb-4"Using relative class
Class aptent taciti sociosqu ad litora torquent per conubia nostra,
per inceptos himenaeos. Fusce a eros eget quam porta lobortis.
class="w-fit relative left-8 top-2 bg-gray-500 py-1 px-2"Relative child
Aenean nec finibus nunc. Sed aliquet massa ut consequat semper.
Etiam eu diam sed sapien hendrerit blandit. Nullam vehicula nisi
a nulla dignissim commodo. Donec sed tempor risus, eu varius erat.
Nam vel nulla risus. Vivamus ornare convallis tincidunt. Quisque
in aliquam velit. Morbi scelerisque volutpat orci, ac viverra
nisl semper eget.
Posições de vento de cauda: Absoluto – Fixo – Fixo
O posicionamento absoluto é um tipo de posicionamento em que um elemento é posicionado em relação ao seu ancestral posicionado mais próximo.
Se não houver ancestral posicionado, o elemento será posicionado em relação ao documento HTML.
O Tailwind fornece uma classe para posicionamento absoluto, chamada absolute .
Essa classe pode ser usada para mover um elemento para uma posição específica na página da web.
Por exemplo:
<img src="mrexample.png" class="absolute top-0 right-0">
O posicionamento fixo é um tipo de posicionamento em que um elemento é posicionado em relação à viewport.
Isso significa que o elemento permanecerá na mesma posição na página da Web, mesmo que o usuário role.
O Tailwind fornece uma classe para posicionamento fixo, chamada fixed .
Essa classe pode ser usada para criar barras de navegação aderentes ou outros elementos fixos em uma página da Web.
Por exemplo:
<nav class="fixed top-0 left-0 w-full"> This navigation bar will be fixed to the top of the viewport. </nav>
Observação : é importante considerar a acessibilidade do seu site e garantir que seu posicionamento não interfira em tecnologias assistivas, como leitores de tela.
O posicionamento fixo é um tipo de posicionamento em que um elemento é posicionado com base na posição de rolagem do usuário.
Quando o usuário rolar para um determinado ponto, o elemento ficará na parte superior ou inferior da viewport.
Tailwind fornece uma classe para posicionamento fixo, chamado sticky .
Essa classe pode ser usada para criar cabeçalhos fixos ou outros elementos em uma página da web.
O exemplo a seguir se concentra na implementação das classes absolute , fixed e sticky no Tailwind:
Example:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<!DOCTYPE html>
src="https://cdn.tailwindcss.com"
class="m-3 text-center"
class="text-gray-700 text-2xl font-semibold"
MrExamples
class="my-2 font-semibold"Position class in Tailwind CSS
class="mt-4 bg-gray-200 w-full relative h-28 overflow-auto font-medium"
class="font-medium mb-4"Using absolute class
Class aptent taciti sociosqu ad litora torquent per conubia nostra,
per inceptos himenaeos. Fusce a eros eget quam porta lobortis.
class="w-fit absolute top-0 bg-gray-500 py-1 px-2"Absolute child
Aenean nec finibus nunc. Sed aliquet massa ut consequat semper.
Etiam eu diam sed sapien hendrerit blandit. Nullam vehicula nisi
a nulla dignissim commodo. Donec sed tempor risus, eu varius erat.
Nam vel nulla risus. Vivamus ornare convallis tincidunt. Quisque
in aliquam velit. Morbi scelerisque volutpat orci, ac viverra
nisl semper eget.
class="mt-6 bg-gray-200 w-full relative h-28 overflow-auto font-medium"
class="font-medium mb-4"Using fixed class
Class aptent taciti sociosqu ad litora torquent per conubia nostra,
per inceptos himenaeos. Fusce a eros eget quam porta lobortis.
class="w-fit fixed bg-gray-500 py-1 px-2"Fixed child
Aenean nec finibus nunc. Sed aliquet massa ut consequat semper.
Etiam eu diam sed sapien hendrerit blandit. Nullam vehicula nisi
a nulla dignissim commodo. Donec sed tempor risus, eu varius erat.
Nam vel nulla risus. Vivamus ornare convallis tincidunt. Quisque
in aliquam velit. Morbi scelerisque volutpat orci, ac viverra
nisl semper eget.
class="mt-6 bg-gray-200 w-full relative h-28 overflow-auto font-medium"
class="font-medium mb-4"Using sticky class
Class aptent taciti sociosqu ad litora torquent per conubia nostra,
per inceptos himenaeos. Fusce a eros eget quam porta lobortis.
class="w-fit sticky top-0 bg-gray-500 py-1 px-2"Sticky child
Aenean nec finibus nunc. Sed aliquet massa ut consequat semper.
Etiam eu diam sed sapien hendrerit blandit. Nullam vehicula nisi
a nulla dignissim commodo. Donec sed tempor risus, eu varius erat.
Nam vel nulla risus. Vivamus ornare convallis tincidunt. Quisque
in aliquam velit. Morbi scelerisque volutpat orci, ac viverra
nisl semper eget.
Importante : o posicionamento do Tailwind pode ser complicado e é importante testar seu site em diferentes tamanhos de tela para garantir que seus elementos sejam posicionados corretamente.
Conclusão
As classes de posicionamento Tailwind facilitam a criação de designs da Web com aparência profissional sem a necessidade de escrever CSS personalizado.
Com um pouco de prática, você pode usar essas classes para criar layouts impressionantes e responsivos para seus sites.
Nós valorizamos o seu feedback.
+1
+1
+1
+1
+1
+1
+1
