Recebi uma consulta em meu correio eletrônico sobre a colocação de camadas de maneira absoluta, mas na que não nos importa a definição da tela do usuário e outros ir e vir dos elementos HTML. Nosso companheiro expressou sua dúvida da seguinte maneira:
Se trabalhamos com position: absolute dando um left e um top funciona se tiver sua página alinhada à esquerda. Minha página está alinhada no centro, então o que acontece é que dependendo da resolução da tela que tenha (largura de 800px,1024px,etc) a página fica sambando e não enquadra nada.
Primeiro de tudo, devemos saber que se trabalhamos com o position relative as camadas se colocam no lugar onde aparecem dentro do código HTML. Deste modo, se colocamos uma camada com position relative dentro de uma célula de uma tabela, tal camada apareceria dentro da célula onde a estamos colocando, independentemente do lugar onde se situa a célula ao mudar a definição da tela.
O problema desta solução é que a camada faria crescer a célula da tabela onde queremos colocá-la ( igual a qualquer outro elemento HTML que colocássemos dentro da tabela) e é muito provável que nosso desenho não nos permitia este fato. Certamente já teria notado este problema e se é não é assim, convido-lhe a que crie a camada que você tenta colocar com o atributo position a relative para ver se com isso seu problema já está resolvido.
Em todos os casos, a camada que tentamos colocar terá que ter o position absolute, porque com relative não consertamos totalmente o problema. Então voltaremos ao problema inicial, que era situar a camada com position absolute no lugar exato, independentemente da definição de tela.
A solução final que proponho passa por aplicar algum truquezinho. De fato, estive a alguns dias atrás me perguntando sobre esta questão e afinal encontrei a solução, apesar de não ter vindo de mim, e sim que a extrai de
www.cross-browser.com.
A idéia é um pouco complexa e colocá-la em ação devemos realizar uma série de ações que, sinceramente, considero excessivas para um problema inicialmente simples. Sendo assim, não se assustem com o que vou expor a seguir, pois logo tratarei de explicar um pouco melhor.
Nosso esquema de trabalho consistirá em uma camada com posição relativa, que nos servirá de "âncora" e outra com a posição absoluta, onde colocaremos o conteúdo final a mostrar na camada.
Colocaremos a camada relativa no lugar aproximado onde queremos que apareça a camada absoluta. Posicionaremos a camada absoluta, uma vez carregada a página, em um lugar próximo à camada relativa. Supostamente, vamos ter que realizar estas ações com Javascript, que é a linguagem que nos permite atualizar as posições das capas dinamicamente.
Detalhadamente
Dissemos que haveria que colocar uma camada perto do lugar onde tem de aparecer a camada com position absolute. Insisto em que as camadas relativas sejam colocadas no lugar onde as colocamos dentro do código HTML, pois será fácil colocar a capa relativa no lugar exato e que este lugar seja válido para qualquer definição.
A segunda capa, a que Tem o conteúdo final, a colocamos inicialmente em uma posição qualquer e escondida, de forma que não se veja que está mal colocada. Uma vez terminada de carregar a página, poderemos acessar a posição da camada relativa, extraindo seus valores top e left e colocando-os em os correspondentes top e left da capa com posição absoluta. Uma vez marcada a posição da capa absoluta podemos torná-la visível.
Na imagem seguinte colocamos a camada com posição relativa no link. Na verdade haveria três camadas para poder posicionar outras tantas camadas com posição absoluta. A parte que vemos sombreada de verde corresponde ao espaço que abarcaria a camada relativa.
Sua posição seria a que está marcada por um "x " vermelho que aparece em sua esquina esquerda. Tal posição depende do lugar onde apareça os links na página.
Logo, com Javascript deveríamos atribuir a posição da camada absoluta de uma maneira parecida a esta.
left da capa absoluta = left da capa relativa
top da capa absoluta = top da capa relativa + altura da capa relativa
Podemos somar algum píxel a mais à posição da camada, se é que queremos movê-la um pouco abaixo e à direita, tal como vimos na imagem.
Não pretendo neste artigo, explicar como se fazem essas operações de Javascript. Advirto que se não se conhece nada de Javascript será impossível se dispor de uma tarefa tão tediosa como o maneja de camadas. Se por o contrário, já tivemos contato com Javascript e DHTML anteriormente, não deveria ser um problema realizar essas ações.
