Camada com position absolute sai descolocada

Pergunta
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?

Valorize esta FAQ:
A FAQ Camada com position absolute sai descolocada tem Pertence à categoria:
Resposta
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

Voltar à árvore de categorias Voltar à árvore de categorias

Comentários da faq
Foram enviados 2 comentários à faq
2 comentários não revisados
0 comentários revisados
 
FAQs relacionadas
  + Links que mudam ao passar o mouse
  + Diferenças de colocar estilos CSS em diferentes lugares
  + Mudar tipografia para toda a página
  + Mudar o tamanho de letra de um menu select
  + Estilo nos campos de formulário
  + Estilos em barras de deslocamento
  + Como eliminar as margens de cima e debaixo que tem um formulário
  + Definir as margens de um cabeçalho ou título <h1>
  + Alinhamento de texto à direita
  + Mudar o estilo da primeira letra de um parágrafo
  + [...]

Ver todas las FAQS de CSS

Usuários :    login / registro

Home | Sobre nós | Copyright | Anuncie | Entrar em contato