# Como encontrar o elemento-pai relativo mais próximo > Descubra como encontrar o elemento-pai relativo mais próximo usando offsetParent e DevTools. Resolva problemas complexos de posicionamento CSS. Debugue melhor! URL: https://dpw.dev/css/como-encontrar-o-elemento-pai-relativo-mais-proximo/ Publicado em: 2021-02-11 Categoria: css Autor: Tárcio Zemel 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. ![Comparação de posicionamento CSS absoluto e relativo: o elemento-pai sendo absolute ou relative faz toda a diferença.](/images/blog/como-encontrar-o-elemento-pai-relativo-mais-proximo/image.webp) Na imagem acima, o elemento com posição absoluta é posicionado com o mesmo [CSS](/categoria/css/) em ambos os exemplos: ```scss .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). [Exemplo no CodePen](https://codepen.io/anon/pen/ZEBOZdj) **Atenção:** se nenhum ancestral tem posicionamento relativo, um elemento com `position: absolute` será colocado em relação à ``. 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: ``` $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: ``` 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: ``` 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](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetParent) 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**. --- Fonte: [dpw - desenvolvimento para web](https://dpw.dev/) (pt-BR). Guia para agentes: https://dpw.dev/llms.txt Índice completo: https://dpw.dev/sitemap-index.xml Feed: https://dpw.dev/rss.xml