Posicionamento Absoluto em CSS
O uso de posicionamento absoluto remove o elemento do fluxo padrão do documento, permitindo que outros elementos vizinhos ocupem o espaço deixado. Os valores de posicionamento top, left, bottom e right do elemento são calculados em relação ao seu ancestral mais próximo com posicionamento não estático. Se não houver tal ancestral, os valores são determinados com base nas bordas do elemento <body>.
position: absolute;
Geralmente, o posicionamento absoluto é utilizado em conjunto com o posicionamento relativo, pois é necessário posicionar um elemento em relação a outro elemento no fluxo do documento.
Considere o exemplo a seguir. O objetivo é posicionar o nome da cidade (um elemento <span> com a classe description) no canto superior direito do cartão da cidade (um elemento <div> com a classe card). Observe a propriedade position para os diferentes elementos.
index.html
index.css
Neste exemplo, os elementos .description são posicionados de forma absoluta dentro dos elementos .card, graças ao position: relative; aplicado ao .card. Esse posicionamento coloca os nomes das cidades no canto superior direito de cada card.
É possível mover o elemento em relação a outro elemento. Como isso funciona? É necessário aplicar position: relative; ao elemento que é o ancestral do elemento que se deseja posicionar de forma absoluta. Caso contrário, o elemento será posicionado em relação ao elemento <body>.
Nota
Ao especificar as propriedades
top,left,rightebottompara o elemento posicionado absolutamente, o navegador as calcula a partir das bordas do elemento posicionado relativamente. Isso pode ser entendido como a aplicação de uma margem ao elemento filho dentro do elemento pai.
Obrigado pelo seu feedback!
Pergunte à IA
Pergunte à IA
Pergunte o que quiser ou experimente uma das perguntas sugeridas para iniciar nosso bate-papo
Can you explain the difference between absolute and relative positioning?
How do I use absolute positioning to place an element in a specific corner?
What happens if I don't set position: relative on the parent element?
Awesome!
Completion rate improved to 2.04Posicionamento Absoluto em CSS
Deslize para mostrar o menu
O uso de posicionamento absoluto remove o elemento do fluxo padrão do documento, permitindo que outros elementos vizinhos ocupem o espaço deixado. Os valores de posicionamento top, left, bottom e right do elemento são calculados em relação ao seu ancestral mais próximo com posicionamento não estático. Se não houver tal ancestral, os valores são determinados com base nas bordas do elemento <body>.
position: absolute;
Geralmente, o posicionamento absoluto é utilizado em conjunto com o posicionamento relativo, pois é necessário posicionar um elemento em relação a outro elemento no fluxo do documento.
Considere o exemplo a seguir. O objetivo é posicionar o nome da cidade (um elemento <span> com a classe description) no canto superior direito do cartão da cidade (um elemento <div> com a classe card). Observe a propriedade position para os diferentes elementos.
index.html
index.css
Neste exemplo, os elementos .description são posicionados de forma absoluta dentro dos elementos .card, graças ao position: relative; aplicado ao .card. Esse posicionamento coloca os nomes das cidades no canto superior direito de cada card.
É possível mover o elemento em relação a outro elemento. Como isso funciona? É necessário aplicar position: relative; ao elemento que é o ancestral do elemento que se deseja posicionar de forma absoluta. Caso contrário, o elemento será posicionado em relação ao elemento <body>.
Nota
Ao especificar as propriedades
top,left,rightebottompara o elemento posicionado absolutamente, o navegador as calcula a partir das bordas do elemento posicionado relativamente. Isso pode ser entendido como a aplicação de uma margem ao elemento filho dentro do elemento pai.
Obrigado pelo seu feedback!
