Qual programador backend nunca teve problemas com posicionamento em css? Este artigo trás algumas dicas para você se tornar um ter menos problemas com posicionamento.

Não compreendemos posicionamento em css, pois quando temos um ataque de fúria durante a correção de um bug vamos setando valores até que o CSS “funcione” da forma que esperamos, e não procuramos entender o porquê. Contudo, conhecer acerca das propriedades e comportamentos do posicionamento, e mais importante, como isso vai afetar nosso html nos ajuda a evitar problemas e não usar as propriedades da forma incorreta.

A especificação do css nos oferece cinco tipos de posicionamentos: static, fixed, absolute, relative e inherit. Cada um servindo a um propósito. Entender o propósito de cada um é a chave para a produção de bons layouts baseados em CSS.

Comece como o fluxo

Primeiramente, vamos reconhecer em que “mundo” estaremos trabalhando. E em nosso mundo de CSS começaremos com limites. Em CSS, estes limites são chamados Fluxo Normal.

Caixas no fluxo normal pertence a um contexto de formatação, que podem ser bloco ou inline, mas não os dois simultaneamente. Caixas em nível de bloco participam de um contexto de formação de bloco. Caixas em nível inline participam de um contexto de formatação inline.

Pensa na caixa da descrição acima como uma caixa de madeira. Agora, imagine que o fluxo normal é como a lei da gravidade. O fluxo normal faz com que os elementos apareçam no site como uma pilha, ou seja um sobre o outro na ordem em que eles são declarados no html.

Static e Relative – nada novo por enquanto

Os posicionamentos static e relative se comportam como blocos de brinquedo – isso mesmo, aqueles que empilhavámos quando pirralhos – e vão se empilhar da maneira que você quiser. Note que Static é o valor padrão do posicionamento nos elementos, e você deve deixar de aplicar qualquer outro valor. Se você possui três elementos posicionados de forma estática em seu código, eles irão se posicionar um sobre o próximo, assim como você espera.

Vamos a um exemplo de três elementos posicionados de forma estática:

Neste primeiro exemplo você pode ver os elementos empilhados feito um torre. Legal, não?

Você pode utilizar static para layout simples, baseados em uma coluna onde cada elemento deverá permanecer sobre o próximo. Porém se você deseja começar a movimentos os elementos utilizando comandos como top, bottom, left, right, você está sem sorte. Essas propriedades não estão disponíveis para elemetos estáticos. De fato, um elemento static não pode sequer criar um novo sistema de coordenadas para um elemento filho. Mas espera aí. Que negócio é esse de sistemas de coordenadas? Leia abaixo sobre relative e descubra.

Elementos posicionados de forma relativa se comportam como elementos posicionados de forma estática; eles se relacionam melhor com outros elementos, empilham facilmente, e não causam tumultos. Difícil de acreditar, certo? Vamos olhar o exemplo anterior, porém posicionado com valor relative:

O segundo exemplo prova que elementos posicionados de forma relativa se comportam da mesma forma que elementos posicionados de forma estática. O que não imaginamos sobre os elementos com posicionamento relativo é que eles são como o Clark Kent – eles escondem poderes muito maiores que seus irmãos estáticos.

Para os que são iniciantes, nós podemos deslocar os elementos utilizando as seguintes propriedades: top, right, bottom e left. Utilizando o código do nosso exemplo anterior vamos adicionar deslocamentos para o #box_2:

O terceiro exemplo mostra o posicionamento relativo em ação. Nossos três blocos estavam bem empilhados, porém o bloco azul foi empurrado 200px para a esquerda. É nesse momento que começamos a dobrar a lei da gravidade a nossa vontade.  Note que o bloco azul continua seguindo o fluxo do documento, mas reparem o bloco verde (#box_3) na parte inferior. Ele está situado abaixo do bloco azul, porém o bloco azul não está diretamento posicionado acima dele. Quando você utiliza propriedades de deslocamento para desviar relativamente elementos, isto não afeta os elementos que o seguem. A caixa verde ainda está posicionada da mesma forma, como se a caixa azul não fosse deslocada.

Criar sistema de coordenadas para elementos filhos é outro recurso dentros dos fantásticos recursos que o posicionamento relativo possui. Um sistema de coordenadas é um ponto de referência para propriedades de deslocamento. Recordem o terceiro exemplo, o nosso bloco (#box_2) não está situado dentro de qualquer outro elemento, então as coordenadas que o afastam 200px utilizam como base o próprio documento. Se colocarmos o #box_2 dentro do #box_1, nós teríamos um resultado diferente, o #box_2 se posicionaria relativamente utilizando o sistema de coordenadas do #box_1. Para o próximo exemplo, nós não iremos alterar o CSS, somente ajustaremos o HTML para mover o #box_2 para dentro do #box_1:

O quarto exemplo mostrar nossa nova marcação. Por causa do sistema de coordenadas, as medidas do bloco azul se deslocam 200px para a esquerda do bloco vermelho (#box_1) no lugar do documento.

Absolute – qualquer local, qualquer hora

Se o posicionamento relativo se comporta como o Superman, então posicionamentos absolutos equivalem a “Origem” – você irá modelar o mundo segundo sua vontade. Ao contrário de valores relativos e estáticos, um elemento posicionado de forma absoluta é retirado do fluxo normal. Isto significa que você pode colocá-lo em qualquer lugar, e isto não afetará nenhum elemento que está dentro do fluxo. Imagine este elemento como algo com cola super-bonder, em qualquer lugar que você desejar o elemento poderá se posicionar. Exatamente igual a elementos relativos, os elementos posicionados com valores absolutos podem se deslocar utilizando as propriedades: top, right, bottom, left. Você setar um elemento com top: 100px; e left: 200px; e o elemento ficará a 100px do topo e a 200px da borda esquerda do documento. Neste exemplo usaremos 4 elementos.

O quinto exemplo mostrar quatro caixas, uma em cada canto da janela do navegador. Desde que definimos o valor de cada caixa para absolute, temos essencialmente posicionado cada caixa para um canto do navegador. Assim, se você redimensionar a janela do navegador as caixas continuarão em seus respectivos cantos. Se você diminuir a janela do navegador até que as caixas fiquem sobrepostas, você perceberá que não existe interação – isto porque elas estão fora do fluxo normal do documento.

Da mesma forma que ocorre em elementos de posicionamento relativo, elementos absolutos criam um novo sistema de coordenadas para elementos filhos. O sexto exemplo complementa o quinto exemplo com uma caixa menor laranja no interior de cada caixa. Observe que o deslocamento de cada elemento são relacionados ao elemento pai.

Para não ser ultrapassado por outras propriedades de posicionamento, o posicionamento absolute oferece algumas funcionalidades usando propriedades de deslocamento. Use duas, ou todas as propriedades de deslocamento, e você poderá estender o elemento sem a necessidade de definir um width (largura) ou height (altura).  Veja o código:

No sétimo exemplo nós criamos bordas de 10px do documento, e é totalmente fluida quando o documento for redimensionado. Em outro exemplo nós podemos criar um layout de duas colunas que preenchem todos a altura do documento.

O exemplo a seguir mostrar um layout de duas colunas com preenchimento total da tela. Enquanto isto não é provavelmente a melhor abordagem para um layout de duas colunas, isto mostra o poder que o posicionamento absoluto possui. Utilizando um pouco de imaginação você pode encontrar várias aplicações úteis com position: absolute;. Truques semelhantes utilizam apenas um único valor de deslocamento.

No exemplo abaixo se concentre no bloco azul. Note como eu utilizo apenas um deslocamento, left: 100px;. Isso permite que o elemento do #box_2 mantenha sua borda superior e ainda o deslocamento de 100px para a esquerda.

Se aplicarmos um segundo deslocamento para o top, nós veríamos que o bloco azul (#box_2) é puxado para o topo do documento. Veja no exemplo abaixo:

Fixed – sempre ali

Um elemento com position: fixed compartilha todas as regras de um elemento posicionado de forma absoluta, exceto que o navegador posiciona o elemento de forma fixa, em oposição a qualquer elemento pai. Complementando, um elemento com posicionamento fixo não se move com a rolagem de tela. Ele fica… parado. Vamos ver um exemplo:

#box_2 {
position: fixed;
bottom: 0;
left: 0;
right: 0;
}

No próximo exemplo é mostrado um rodapé com algumas informações de copyrights em um elemento de posicionamento fixo. Quando você “desce” a página note que o rodapé não se movimenta. Note também que as propriedades de deslocamento right e left são setados com valor zero. Quando setamos o position como fixed o elemento passa a se comportar como um elemento com position absolute, nós podemos estender o elemento para que ele preencha todos o espaço horizontal do navegador, enquanto movimentamos o elemento para a parte inferior da tela utilizando o bottom: 0;. Utilize com cuidado posicionamento fixo: o suporte em navegadores mais antigos é irregular, na melhor das hipóteses. Se você quiser passe por este post sobre como resolver erros com posicionamento fixo em navegadores mais antigos.

Inherit – algo para nada

Como foi mencionado no início deste post, existem cinco propriedades de posicionamento. O quinto valor é inherit. Ele trabalha como o nome já diz: Ele herda do pai seu posicionamento. Normalmente, elementos propriedades de posicionamento não são herdados dos elementos pais – é atribuído valor estático se nenhum posicionamento for setado.

Espero ter atendido a algumas dúvidas sobre posicionamento em CSS. Com estes conhecimentos vocês poderão aumentar a produtividade e diminuir erros, além de abstrair melhor qual valor de posicionamento deverá ser utilizado.

Este post tem como referência o artigo http://bit.ly/cTxPM3