Pessoal, Bom dia! Estou com a seguinte dúvida hoje. O valor absolute, tem suas definições com base no posicionamento da página como um todo, ou com base no ultimo position utilizado? Abcs!
Solucionado
Pessoal, Bom dia! Estou com a seguinte dúvida hoje. O valor absolute, tem suas definições com base no posicionamento da página como um todo, ou com base no ultimo position utilizado? Abcs!
Oi Talita , Isso confunde muita gente porque a propriedade position define duas coisas: como o elemento se comporta em relação aos seus ancestrais na hierarquia, e como seus descendentes poderão se comportar em relação a ele.
Os princípios são:
Tanto position: relative quanto position: absolute determinam contextos de posicionamento para os descendentes do elemento.
Elementos com position: absolute são posicionados em relação ao contexto de posicionamento mais próximo. Por exemplo:
<div style="position: relative">
<div>
<div style="position: absolute"></div>
</div>
</div>A terceira <div> pode ser posicionada com top e left em relação à mais externa. Se nenhum contexto de posicionamento for encontrado subindo a hierarquia, o elemento seria posicionado em relação ao <body>.
Elementos com position: absolute não ocupam espaço em nenhum dos ascendentes até o contexto de posicionamento. Considerando o exemplo acima, é como se a div de dentro não existisse, tanto para a do meio, quanto para a de fora. Ela não ocupa espaço dentro das outras, não influi em sua altura ou largura. Diz-se que ela é removida do fluxo de renderização do documento.
Elementos com position: relative ocupam espaço em seus ascendentes. Eles podem ser deslocados de sua posição esperada com top e left, mas esse deslocamento não influi em outros elementos no mesmo nível da hierarquia ou acima. Para os outros, é como se ele sempre estivesse sempre na posição esperada. Mas visualmente ele pode estar deslocado. Por exemplo:
<div style="position: relative">
<div style="height: 100px; background: red; position: relative; top: 50px"></div>
<div style="height: 100px; background: blue"></div>
</div>A div vermelha está a 50px do topo do contêiner, e sobre a metade superior da div azul. Ou seja, foi deslocada 50px de sua posição esperada, mas isso não moveu a div azul de lugar, ela continua "achando" que a vermelha está onde deveria. Por isso é que se diz que os elementos com position: relative são posicionados "em relação a si mesmos"; a referência para o deslocamento é sempre o próprio elemento (e não o contêiner), e para os demais elementos é como se ele não tivesse sido deslocado.
Absolute O elemento fica posicionado de forma absoluta em relação ao fluxo do documento, mas de forma relativa em relação ao seu ancestral mais próximo que também se encontre posicionado ou em relação ao documento.
Ao contrário de um elemento com uma posição relativa, um elemento posicionado de forma absoluta não deixa espaço na fluxo do documento. Um elemento posicionado de forma absoluta está a ser deslocado para cima do fluxo do documento, como que colocado numa camada de elementos superior. A semelhança do que acontece quando usamos o z-index.
Pode ser deslocado fazendo uso das propriedades auxiliares top, right, bottom e left, onde as mesmas indicam a distancia a ficar entre o mesmo e o elemento ancestral mais próximo que se encontre posicionado.
Ajudei ?
Maison, Graças a sua resposta finalmente consegui entender a função do absolute :D. Obrigada !!! ABCS!