Não é tão incomum surgirem problemas CSS com layout relacionados à dinâmica de posicionamento de elementos. Saiba como encontrar o elemento-pai relativo mais próximo.
Você já se deparou com um dilema de posicionamento de CSS em que um elemento com position: absolute não está sendo posicionado como o esperado? Definir o posicionamento absoluto em um elemento irá posicioná-lo em relação ao seu ancestral mais próximo que tem sua posição definida como relativa.
Na imagem acima, o elemento com posição absoluta é posicionado com o mesmo CSS em ambos os exemplos:
|
1 2 3 4 5 |
.absolute { position: absolute; top: 100%; left: 0; } |
Mas acaba em um lugar diferente em cada exemplo. Isso ocorre porque, no primeiro exemplo, seu pai (o elemento rosa) tem position: relative, enquanto, no segundo, é outro ancestral que tem posicionamento relativo (o elemento cinza).
See the Pen Relative and absolute positioning by Michelle Barker (@michellebarker) on CodePen.
Atenção: se nenhum ancestral tem posicionamento relativo, um elemento com position: absolute será colocado em relação à <body>.
Em um exemplo relativamente simples como este, um rápido exame do CSS torna mais fácil determinar qual ancestral tem posicionamento relativo, e é possível ajustar os estilos de acordo se eles não estiverem tendo o efeito desejado. Mas, às vezes, em bases de código mais complexas (especialmente com muitos elementos aninhados), descobrir qual ancestral de um elemento tem posicionamento relativo pode ser um pouco mais complicado.
Isso pode acontecer ao desenvolver cabeçalhos complexos com submenus suspensos de largura total: geralmente é preciso posicioná-los em relação ao cabeçalho inteiro, mas, em algum lugar, inadvertidamente se define position: relative em algum outro elemento, o que quebra o comportamento desejado.
Percorrer todo esse código pode ser demorado, mas, felizmente, há uma maneira mais fácil de encontrar o elemento-ancestral mais próximo posicionado relativamente com JavaScript — e que pode ser feito diretamente no console do navegador.
Como encontrar o elemento-pai relativo mais próximo usando as DevTools
No Chrome e no Firefox, ao abrir a guia Console das DevTools, é possível obter o elemento selecionado atualmente com $0. Então, usa-se a propriedade do objeto offsetParent para encontrar o ancestral mais próximo daquele elemento que tem sua posição definida como algo diferente do padrão (static).
Tente selecionar um elemento e digitar no console:
|
1 |
$0.offsetParent |
Isso não informa se o elemento tem posicionamento relativo. Mas é possível usar getComputedStyle para descobrir o valor da propriedade position do elemento:
|
1 |
getComputedStyle($0.offsetParent).position |
Ao digitar $_ no console, recupera-se a expressão mais recente como uma variável, o que também pode tornar isso mais rápido.
$0.offsetParent mostra o elemento, então:
|
1 |
getComputedStyle($_).position |
Retorna o valor de seu position.
Se a posição desse elemento não for relativa, é possível fazer a mesma coisa novamente e continuar subindo na árvore DOM até encontrar o ancestral com posição relativa. Se você estiver animado, pode até escrever uma função para percorrer recursivamente os nós do DOM. :)
Existem algumas pegadinhas, como: offsetParent retornará null se o elemento tiver sua posição definida como fixed ou se ele mesmo ou seu pai tiver display: none. Consulte a documentação do MDN para obter detalhes.
Conclusão
Muitos na comunidade de front-end concordam que, mesmo que sua área de atuação principal seja mais focada em HTML e CSS, é preciso conhecer um pouco de JavaScript para resolver algumas pendências do dia-a-dia.
Este é um exemplo prático de que a teoria está certa: através de comandos simples no próprio console do navegador, é possível descobrir muito mais facilmente como encontrar o elemento-pai relativo mais próximo.