Tenho um problema com uma camada position: absolute, que não consigo posicioná-la onde queria. À princípio, estou indicando o top e left dessa camada, com os correspondentes atributos CSS, também me sai em um lugar totalmente descolocado.
Resulta que marco o top e left, porém não aparece no lugar que indico. Estou dizendo que se posicione 100 pixels desde o top da página e 10 pixels desde o left. Supõe-se que essa posição, com os atributos top e left de CSS é em relação à esquina superior esquerda do navegador. Mas me sai em um lugar totalmente distinto. O que pode estar acontecendo?
Como você assinala, geralmente position:absolute se posiciona com os atributos CSS top e left com respeito à esquina superior esquerda. Assim é como funciona na maioria dos casos, mas nem sempre é assim.
Na verdade, position:absolute se posiciona com respeito à esquina superior esquerda do primeiro contêiner dessa camada que tenha um position distinto de static. Ou seja, se a camada a qual você põe o position absolute coloca dentro de outra camada que tem um position distinto de static, ocorre que os atributos top e left para posicioná-la serão relativos à esquina superior esquerda da camada contêiner ao invés da esquina superior esquerda do espaço disponível no navegador.
Não sei se é o seu caso, mas por dar um exemplo, isto é algo que passa com os contêiners do Framework 960 grid System, têm position: relative, distinto de static. Por isso as camadas que você colocar como absolute dentro de um dos contêiners não se posicionarão com respeito à esquina superior esquerda do navegador.
Em geral, este problema se soluciona colocando essa camada com position absolute fora de qualquer contêiner, ou seja, colocá-la diretamente no BODY da página.
Por Miguel Angel Alvarez
