Posicionamento Absoluto do CSS
- Página Anterior Posicionamento Relativo do CSS
- Próxima Página Flutuante do CSS
A caixa do elemento posicionado absolutamente é completamente removida do fluxo do documento e posicionada em relação ao bloco contenedor, que pode ser outro elemento no documento ou o bloco contenedor inicial. O espaço ocupado pelo elemento no fluxo normal é fechado, como se o elemento não existisse. A posição do elemento gera uma caixa de bloco, independentemente do tipo de caixa que ele geraria no fluxo normal.
Posicionamento Absoluto do CSS
A posição absoluta faz com que o elemento esteja desligado do fluxo do documento, portanto, não ocupa espaço. Isso é diferente da posição relativa, que é considerada parte do modelo de posicionamento do fluxo normal, pois a posição do elemento é relativa à sua posição no fluxo normal.
Os outros elementos no fluxo normal parecem não existir quando posicionados absolutamente:
#box_relative {
position: absolute;
left: 30px;
top: 20px;
}
Como mostrado na figura a seguir:
A posição do elemento alinhado absolutamente é relativa aElemento ancestral alinhado mais próximoSe o elemento não tiver ancestral alinhado, sua posição é relativa aBloco contendo inicial.
O principal problema da alinhamento é lembrar o significado de cada tipo de alinhamento. Portanto, vamos revisar o que aprendemos: o alinhamento relativo é 'relativo' à posição inicial do elemento no documento, enquanto o alinhamento absoluto é 'relativo' ao ancestral mais próximo alinhado, se não houver ancestral alinhado, então 'relativo' ao bloco contendo inicial.
Comentário:De acordo com o agente de usuário, o bloco contendo inicial pode ser o canvas ou o elemento HTML.
Dica:Como as caixas de posicionamento absoluto não estão relacionadas ao fluxo do documento, elas podem cobrir outros elementos na página. Pode ser configurado através de Propriedade z-indexPara controlar a ordem de empilhamento desses caixas.
Exemplo de Posicionamento Absoluto de CSS
- Posicionamento: Posicionamento Absoluto
- Este exemplo demonstra como usar valores absolutos para posicionar elementos.
- Página Anterior Posicionamento Relativo do CSS
- Próxima Página Flutuante do CSS
