{"id":5652,"date":"2015-03-30T09:15:27","date_gmt":"2015-03-30T12:15:27","guid":{"rendered":"http:\/\/blogimpacta.com.br\/?p=5652"},"modified":"2015-03-30T09:15:27","modified_gmt":"2015-03-30T12:15:27","slug":"dicas-de-css-position-absolut-relative-static-e-fixed","status":"publish","type":"post","link":"https:\/\/www.impacta.com.br\/blog\/dicas-de-css-position-absolut-relative-static-e-fixed\/","title":{"rendered":"Dicas de CSS: position absolut, relative, static e fixed"},"content":{"rendered":"

Para falar de CSS<\/strong> \u00e9\u00a0importante que voc\u00ea entenda primeiro que todo e qualquer elemento em uma p\u00e1gina da web \u00e9 um bloco. Literalmente um ret\u00e2ngulo de pixels. Isto \u00e9 f\u00e1cil de entender quando voc\u00ea define a propriedade ‘display<\/strong>‘ de um elemento como ‘block<\/strong>‘ ou como ‘inline<\/strong>‘; alterando o “fluxo<\/strong>” da p\u00e1gina.<\/span><\/p>\n

Elementos com a propriedade ‘display: block’<\/strong> definida por padr\u00e3o s\u00e3o aqueles que passam para uma nova linha depois que s\u00e3o declarados, ou seja, v\u00e3o sendo apresentados verticalmente.<\/span><\/p>\n

Elementos com a propriedade ‘display: inline’ usam o espa\u00e7o que precisarem, mas n\u00e3o for\u00e7am a passagem para uma nova linha depois que s\u00e3o declarados. Ou seja, eles v\u00e3o sendo apresentados horizontalmente at\u00e9 onde for poss\u00edvel.<\/span><\/p>\n

\"Com<\/a><\/p>\n

Dicas de CSS: Posicionando seus blocos<\/strong><\/span><\/h2>\n

Agora que voc\u00ea consegue visualizar cada um dos elementos como um bloco de pixels, empilhados ou lado a lado, podemos falar da propriedade ‘position’ e sobre como us\u00e1-la para colocar seus blocos onde quiser que eles estejam dentro da p\u00e1gina.<\/span><\/p>\n

A propriedade ‘position<\/strong><\/span>‘ pode ter quatro valores: ‘absolute<\/strong><\/span>‘, ‘relative<\/strong><\/span>‘, ‘static<\/strong><\/span>‘ e ‘fixed<\/strong>‘. Vamos comentar cada um deles.<\/span><\/p>\n

Static<\/strong><\/span><\/h3>\n

Este \u00e9 o valor padr\u00e3o para todos os elementos de uma p\u00e1gina. Elementos diferentes n\u00e3o t\u00eam valores diferentes (como o caso da propriedade ‘display’ visto acima) para a propriedade ‘position’, todos s\u00e3o inicializados como ‘static’. N\u00e3o h\u00e1 complica\u00e7\u00e3o aqui, simplesmente significa que o elemento vai seguir o fluxo da p\u00e1gina normalmente.<\/span><\/p>\n

A \u00fanica boa raz\u00e3o para atribuir explicitamente o valor ‘position: static’ de um elemento \u00e9 for\u00e7ar a remo\u00e7\u00e3o de um posicionamento previamente definido. Isto n\u00e3o vai ser frequente, j\u00e1\u00a0que a propriedade ‘position’ n\u00e3o se propaga (cascade) e uma folha de estilos mais bem pensada pode evitar isto.<\/span><\/p>\n

Relative<\/strong><\/span><\/h3>\n

Esta op\u00e7\u00e3o provavelmente \u00e9 a que mais causa confus\u00e3o \u2013\u00a0e tamb\u00e9m deve ser a mais incompreendida. O que o valor realmente significa \u00e9 “relativo a si mesmo”. <\/span><\/p>\n

Quando voc\u00ea define o estilo ‘position: relative;’ em um elemento, mas n\u00e3o altera nenhum outro atributo de posicionamento (‘top’, ‘left’, ‘bottom’, ‘right’), isto n\u00e3o vai afetar em nada o posicionamento \u2013\u00a0\u00e9 a mesma coisa que definir como ‘position: static;’.<\/span><\/p>\n

Por\u00e9m,\u00a0se voc\u00ea alterar algum outro atributo de posicionamento, como ‘top: 10px’, por exemplo, o elemento vai deslocar sua posi\u00e7\u00e3o 10 pixels abaixo de onde ele normalmente estaria. Com certeza voc\u00ea pode imaginar o quanto \u00e9 \u00fatil poder deslocar um elemento a partir de sua posi\u00e7\u00e3o inicial. \u00c9 muito comum usar isto em elementos de formul\u00e1rio, que n\u00e3o costumam se alinhar da maneira que voc\u00ea esperava.<\/span><\/p>\n

\u00c9 importante\u00a0se atentar para duas outras coisas que acontecem quando voc\u00ea define a propriedade ‘position: relative;’ em um elemento. <\/span><\/p>\n

Uma delas \u00e9 que voc\u00ea vai poder usar a propriedade ‘z-index’ neste elemento, uma vez que ela simplesmente n\u00e3o funciona em elementos posicionados estaticamente. Mesmo que voc\u00ea n\u00e3o defina um valor para ‘z-index’, agora este elemento vai ser apresentado por cima de qualquer outro elemento posicionado estaticamente.<\/span><\/p>\n

A outra coisa que acontece \u00e9 que essa op\u00e7\u00e3o\u00a0muda a refer\u00eancia de posi\u00e7\u00e3o dos elementos filhos que estejam com ‘position: absolute;’. <\/span><\/p>\n

Se um elemento pai estiver posicionado relativamente, qualquer elemento filho pode ser posicionado absolutamente (‘position: absolute;’) em rela\u00e7\u00e3o a ele\u00a0e n\u00e3o em rela\u00e7\u00e3o \u00e0 p\u00e1gina.\u00a0Isto cria op\u00e7\u00f5es interessantes\u00a0como, por exemplo, mover o objeto pai sem precisar se preocupar com a posi\u00e7\u00e3o dos elementos contidos nele.<\/span><\/p>\n

Absolute<\/strong><\/span><\/h3>\n

Esta \u00e9 uma op\u00e7\u00e3o poderosa que permite que voc\u00ea literalmente posicione qualquer elemento exatamente onde quiser, utilizando\u00a0os atributos de posicionamento ‘top’, ‘left’, ‘bottom’, ‘right’ para definir a localiza\u00e7\u00e3o. <\/span>
\nLembre-se de que a posi\u00e7\u00e3o ser\u00e1 definida em rela\u00e7\u00e3o ao pr\u00f3ximo elemento pai que esteja posicionado relativamente ou absolutamente. <\/span>
\nSe n\u00e3o houver um elemento pai, por padr\u00e3o ele vai definir o pr\u00f3prio elemento <html> como sua raiz, o que significa que a posi\u00e7\u00e3o ser\u00e1 definida em rela\u00e7\u00e3o \u00e0 pr\u00f3pria p\u00e1gina web.<\/span>
\nO lado ruim do posicionamento absoluto, que \u00e9 tamb\u00e9m a coisa mais importante a ser lembrada, \u00e9 o fato de que estes elementos s\u00e3o removidos do fluxo de elementos da p\u00e1gina. Um elemento com esta op\u00e7\u00e3o de posicionamento n\u00e3o \u00e9 afetado por outros elementos e tamb\u00e9m n\u00e3o afeta os outros. <\/span>
\nVoc\u00ea deve levar isto a s\u00e9rio todas as vezes que pensar em usar ‘position: absolute;’. O uso excessivo ou incorreto pode limitar a flexibilidade do seu site.<\/span><\/p>\n

Fixed<\/strong><\/span><\/h3>\n

Este tipo de posicionamento \u00e9 bastante raro, mas certamente tem sua utilidade. A posi\u00e7\u00e3o de um elemento com posicionamento fixo (position: fixed;) \u00e9 definida em rela\u00e7\u00e3o \u00e0 “viewport”, ou seja, a pr\u00f3pria janela do browser.<\/span><\/p>\n

Quando rolamos a p\u00e1gina, a “viewport” n\u00e3o muda, portanto o elemento vai ficar exatamente onde est\u00e1, criando um efeito\u00a0um pouco parecido com os “frames” de antigamente. <\/span><\/p>\n

Um exemplo seria usar uma barra de navega\u00e7\u00e3o lateral com posicionamento fixo. A parte boa \u00e9 que a navega\u00e7\u00e3o fica sempre vis\u00edvel durante o uso da p\u00e1gina, com um efeito interessante. <\/span><\/p>\n

A parte ruim diz respeito \u00e0 usabilidade. Em dispositivos menores (tablets, smartphones ou notebooks pequenos), parte da barra pode ficar cortada e n\u00e3o h\u00e1 como rolar a tela para ver o resto do conte\u00fado. Essa op\u00e7\u00e3o deve ser usada com cuidado.<\/span><\/p>\n

E ent\u00e3o, pronto para aplicar seus novos conhecimentos? Ainda tem alguma d\u00favida? Deixe um coment\u00e1rio!<\/span><\/p>\n

Quer saber mais sobre HTML e CSS? Baixe o nosso e-book gratuito sobre o assunto!<\/a><\/span><\/p>\n

<\/i>Love<\/span>0<\/span><\/span><\/a> <\/i> <\/i>