Diferença entre a posição CSS relativa e absoluta

No CSS, o “posição”A propriedade é utilizada para definir a posição do elemento, onde os elementos HTML devem ser exibidos na página da web. Esta propriedade está vinculada às propriedades esquerda, direita, superior e inferior para definir o local final do elemento HTML.

Este blog discutirá:

• O que são CSS “posição”Tipos?
• Como usar o CSS “Posição: relativa" Propriedade?
• Como usar o CSS “Posição: Absoluto" Propriedade?

Quais são os tipos de “posição” CSS?

Existem cinco tipos de posições de CSS:

• ““estático”: Os elementos estaticamente posicionados não são afetados pelas propriedades de deslocamento inferior, esquerda, direita e superior. É o valor padrão de um elemento HTML.
• ““fixo”: O elemento posicionado fixo permanece no mesmo local em que é definido mesmo na tela de rolagem.
• ““pegajoso”: Um elemento posicionado pegajoso permanecerá estático quando o usuário rola a tela.
• ““absoluto”: Um elemento absoluto está posicionado ou colocado em relação ao elemento HTML ancestral posicionado mais próximo ou mais próximo.
• ““relativo”: O elemento relativo é colocado em relação à sua posição normal.

Agora, antes de discutir a diferença entre o elemento posicionado relativo e absoluto, criaremos uma página da web para a demonstração.

Pré -requisito

Em html, primeiro, adicione um elemento div com o nome do atributo de classe “Div-Parent”. Dentro disso, inclua mais quatro tags com o nome da classe “Div-1”. Observe que apenas o segundo terá duas classes, “Div-1" e "posicionamento”.

Html

Vamos aplicar o estilo CSS aos elementos mencionados no bloco de código HTML acima.

Estilo “div-parent” div

.Div-Parent
Margin-top: 100px;
Posição: relativa;

O elemento div com o nome da classe “Div-Parent”É estilizado com as propriedades do CSS que são explicadas abaixo:

• ““margin-top”A propriedade é utilizada para definir o espaço no topo do elemento div.
• ““posição”A propriedade é definida como“relativo”, Que posiciona ou coloca o elemento selecionado em relação à sua posição normal.

Estilo “div-1” div

.div-1
Background-Color: BlueViolet;
Largura: 200px;
Altura: 200px;
Fronteira: 5px tracejado #000000;
Exibição: bloco embutido;

Aqui está a explicação das propriedades aplicadas:

• ““cor de fundo”Propriedade define a cor de fundo do elemento div.
• ““largura”Propriedade define a largura do elemento HTML adicionado.
• ““altura”O valor da propriedade representa a altura do elemento HTML.
• ““fronteira”A propriedade aplica a fronteira em torno de um elemento. É especificado usando os valores para a largura, estilo e cor.
• ““mostrar"Com o valor"Block inline”A propriedade permite a aplicação da largura e altura ao elemento.

Como usar "Posição: Relativa" no CSS?

Quando você define o “posição”Valor da propriedade como“relativo”, Ele se move em relação à sua posição normal. Sua posição também depende dos valores como as propriedades laterais. No entanto, outros elementos não serão redimensionados para preencher a lacuna deixada para trás pelo elemento.

Estilo “posicionamento” div

.posicionamento
Background-Color: Chocolate;
Posição: relativa;
topo: 20px;
Esquerda: 20px;

Aqui:

• ““posição”O valor da propriedade é definido como“relativo”, Que posiciona o elemento em relação à sua posição normal. Em seguida, é emparelhado com as propriedades superior, direita, esquerda e inferior para definir o local final.
• ““principal”Propriedade com o valor“20px”Define um espaço de 20px acima de um elemento.
• ““esquerda”Propriedade com o valor“20px”Fornece um espaço de 20px no lado esquerdo de um elemento.

O resultado abaixo mostra claramente que a posição da segunda caixa é movida da parte superior e da esquerda:

Como usar "Posição: Absoluto" no CSS?

O "posição”Propriedade com o valor“absoluto”Altera a posição do elemento em relação à sua divisão de pai posicionada. Se a posição do elemento pai não for definida em relação, então o div se moverá em relação ao corpo da página da web. Além disso, outros elementos preencherão o espaço deixado pelo elemento.

Vamos mudar o “posição”Propriedade da div com a classe chamada“posicionamento”De relativo ao absoluto e veja a diferença:

Posição: Absoluto;

A segunda caixa é definida como 20px do espaço superior e 20px do espaço da esquerda em relação ao elemento pai:

Isso era tudo sobre a posição relativa e absoluta no CSS.

Conclusão

No CSS, para definir o local final do elemento, a propriedade de posição é utilizada. Mais especificamente, o “relativo”Posição coloca a posição do elemento em relação à sua posição normal, enquanto“absoluto”A posição coloca o elemento em relação ao seu elemento HTML pai posicionado. Este blog discutiu a diferença entre as posições relativas e absolutas do CSS.