Posicionando relativamente o absoluto

Publicado em: 31/03/2005
Atualizado em: 23/03/2011

Autor: Douglas Bowman
URL do original: https://www.stopdesign.com/articles/absolute/
Título original: Making the Absolute, Relative
Traduzido com autorização expressa do autor

O que há com os DIVs aninhados ?

Recentemente um leitor curioso fez-me uma pergunta à propósito do redesign do site Adaptive Path :

“Fiquei intrigado com o fato de você, na barra de navegação principal, ter posicionado absolutamente uma div um div dentro de outro que está posicionado relativamente.”

A resposta simples para esta questão é: Porque eu buscava flexibilidade total para o cabeçalho e a navegação, e também, para manter a navegação a uma mesma distância do logotipo, independentemente de quanto o usuário redimensionasse o texto.

Esta é a resposta estratégica demonstrando a racionalidade do método. Contudo eu imagino que meu leitor estivesse buscando uma resposta tática para a sua pergunta. E, para respondê-la de maneira direta, vou fazer algumas considerações e explicar como funciona o posicionamento absoluto nas CSS, usando minhas próprias palavras e estabelecendo comparação, com uso de um exemplo, mostrando um efeito diferente daquele conseguido na área de navegação do site Adaptive Path.

Blocos de conteúdos (Contexto de posicionamento )

Colocar um elemento posicionado de forma absoluta dentro de outro elemento posicionado de forma relativa é uma técnica mágica, frequentemente usada. O mais comum é ouvir-se exatamente o inverso: um elemento posicionado de forma relativa ocupa posição em volta de um elemento posicionado absolutamente.

Segundo as especificações das CSS2 um elemento posicionado de forma absoluta ocupa a posição de acordo com o bloco que o contém. Qualquer elemento é considerado “posicionado” se o valor para posição for relative, absolute, ou fixed (qualquer valor que não seja static). “Static” é um dos possíveis valores para a propriedade position. É também o valor padrão para qualquer elemento que não tenha sua posição explicitamente declarada. Static significa que o posicionamento do elemento não foi modificado e ele estará localizado no fluxo normal do documento, inserido no contexto normal de seus elementos vizinhos e dos blocos que o contém.

Se um elemento posicionado de forma absoluta não está contido em qualquer elemento posicionado, ou seja, quando nenhum de seus elementos-ancestrais não forem posicionados, ele será posicionado em relação aos limites da página (chamada de bloco de conteúdo inicial). Assim um elemento estilizado com regras como mostrado a seguir:

#topleft {
	position:absolute;
	top:0;
	left:0;
	}

será posicionado no canto superior esquerdo (top-left) da página. Contudo, se qualquer elemento-ancestral (elemento do qual ele seja descendente) for posicionado, então este ancestral estabelecerá um bloco de conteúdo para todos os seus descendentes. Se um elemento ancestral for posicionado, estabelecerá um novo contexto para posicionamento de todos seus descendentes (um novo bloco de conteúdo). Neste caso, os valores de box offsets estabelecidos na regra CSS mostrada posicionará o elemento #topleft no canto superior esquerdo do seu ancestral posicionado e não no canto superior esquerdo da página.

Está perdido ainda? Para mim isto também parece confuso. Vou esclarecer com um exemplo que colocará as coisas no seu lugar.

Posicionamento dinâmico

Para o stopdesign.com, (à época que escrevi este artigo) eu uso um posicionamento absoluto para a coluna da direita (#subcol). Quando eu projetei os templates eu queria que a coluna da direita ficassse logo abaixo do topo (#header) sem espaçamentos ou sobreposições entre os dois blocos. O topo contém o logo e a barra de navegação principal. Como a barra de navegação é constituida de texto, ela poderá ser redimensionada quando o usuário redimensionar os tamanhos de fontes no browser. Isto afeta diretamente a altura do topo. Poderia ter escolhido posicionar a coluna da direita em relação aos limites da página escolhendo um valor top para a propriedade do posicionamento, igual a altura do topo. Mas, como o topo varia em altura de acordo com o tamanho de fonte adotado pelo usuário em seu navegador, isto poderia fazer com que a coluna da direita ficasse em cima do topo quando este aumentasse sua altura. Ou um espaçamento poderia surgir quando o topo tivesse sua altura reduzida abaixo da medida estabelecida inicialmente.

Diagrama 1

Para fazer as adaptações necessárias devido a esta variação de altura do topo, eu posicionei o elemento de conteúdo (ancestral) (#content). Este elemento aparece na marcação do código imediatamente embaixo do topo e posicionado com position:relative;. Ele se posiciona, no fluxo do documento, sempre abaixo do topo, independentemente da maior ou menor altura assumida pelo topo. Em razão de #content ter sido posicionado, ele cria um novo contexto para seus elementos descendentes. A coluna da direita (#subcol) está contida dentro de #content, desta forma ela permanecerá posicionada no canto superior direito de #content, e não no canto superior direito da página. Isto também faz com que a coluna direita se adapte na posição de acordo com a altura assumida pelo topo, como mostrado no Diagrama 1.

O limite inferior da barra de navagação

Diagrama 2-A

Diagrama 2-B

Para concluir, voltemos ao site Adaptive Path e sua barra de navegação que demonstra os diferentes usos desta técnica de fazer o absoluto, relativo. Eu poderia ter definido um valor fixo para margin-top da barra de navegação e pronto. Mas naquele caso eu queria que o topo tivesse sua altura constante independentemente de como o usuário dimensionasse a fonte de seu browser. Em outras palavras, eu não queria que a borda verde escura embaixo da barra navegação tivesse qualquer deslocamento vertical em relação ao logotipo, como mostrado nos Diagramas 2-A and 2-B.

O texto da barra de navegação é livre para ser redimensionado de acordo com as preferências de tamanho de texto do usuário, mas sua linha de base (NT: a borda verde escura) permanece fixa na posição. O texto da barra de navegação sempre tocará na borda verde escura sem contudo nunca ultrapassá-la. Ao posicionar o elemento #nav usando position:relative; e definindo uma altura fixa (72px), para seu antecessor este estabelecerá um novo contexto de posicionamento para seu DIV “interior”. O DIV interior agora poderá ser absolutamente posicionado em relação a parte inferior de seu ancestral #nav usando-se bottom:0;.

Certamente existem outros usos para esta técnica. Não é incomum desejar-se redefinir um contexto para posicionamento de modo a permitir um posicionamento absoluto outro que não em relação aos limites da página. As razões pelas quais eu faço o que faço, frequentemente são óbvias para mim. Mas, devemos nos lembrar que o óbvio para nós nem sempre o é para os outros. Talvez esta técnica seja agora melhor entendida por alguns (talvez mesmo, óbvia)

Este artigo foi originariamente postado no weblog com o mesmo título atual, Making the Absolute, Relative.