Propriedade da posição CSS | Explicado

As folhas de estilo em cascata (CSS) consistem em uma vasta gama de propriedades usadas para estilizar elementos html, por exemplo, a propriedade colorida é usada para dar texto a aparecer nas páginas da web alguma cor, a propriedade de exibição define o comportamento dos elementos html, propriedade de borda define as especificações da fronteira de um elemento, e a lista continua. Este artigo, no entanto, foi projetado para lançar luz na propriedade de posição do CSS. Este guia cobre o seguinte.

1. Propriedade da posição
2. Como atribuir posicionamento relativo a um elemento HTML
3. Como atribuir posicionamento absoluto a um elemento HTML
4. Como dar posição fixa a um elemento HTML

Propriedade da posição

A propriedade de posição do CSS especifica a posição de um elemento HTML em uma página da web. Tem a sintaxe abaixo mencionada.

posição: valor;

Aqui está um exemplo para demonstrar ainda mais a propriedade de posição.

Como atribuir posicionamento relativo a um elemento HTML

Este exemplo demonstra o valor relativo da propriedade de posição que coloca um elemento em relação à sua posição original.

Neste exemplo, estamos colocando uma imagem em uma determinada posição usando o valor relativo da propriedade de posição.

Html

CSS

.imagem
Posição: relativa;
Esquerda: 80%;
topo: 0%;
Altura: 100px;
Largura: 200px;

Saída

Aqui a imagem está sendo posicionada 80% da esquerda da página em relação à sua posição original.

A posição padrão da imagem é a seguinte.

Existem alguns valores que podem ser atribuídos à propriedade de posição do CSS, que são os seguintes.

Valor	Descrição
estático	Este é o valor padrão que coloca os elementos de acordo com sua posição definida no documento.
relativo	Posiciona um elemento em relação à sua posição original.
absoluto	Posiciona um elemento com referência à posição do ancestral do elemento.
fixo	Posiciona um elemento em relação à janela do navegador.
pegajoso	Ele posiciona um elemento com referência à posição de rolagem do usuário.
inicial	Posiciona um elemento em seu valor padrão.
herdar	Ele posiciona um elemento em relação às propriedades herdadas de seu elemento pai.

Mais alguns exemplos

Para o seu melhor entendimento, ilustramos a propriedade da posição com a ajuda de mais alguns exemplos.

Como atribuir posicionamento absoluto a um elemento HTML

Este exemplo demonstra o valor absoluto da propriedade de posição.

Html

Div
Child Div

Aqui, dois exemplos são elementos que estão sendo criados um é considerado como pai div e o outro como criança div.

CSS

A divisão dos pais recebeu a posição relativa e a divisão infantil recebeu a posição absoluta. Como sabemos que o valor absoluto posiciona um elemento em relação à posição do seu pai, portanto, para que o filho DIV tenha uma posição absoluta em relação ao pai da Div, atribuímos ao pai dividir a posição relativa, a posição relativa.

Saída

A divisão infantil foi colocada em uma posição absoluta em relação à divisão dos pais.

Como dar posição fixa a um elemento HTML

Este exemplo demonstra o valor fixo da propriedade de posição.

Html

Div

Div

Div Green

Criamos três elementos um com o nome Yellow Div, o segundo nome Red Div e o terceiro div pelo nome Green Div.

CSS

.amarelo
Background-Color:#ffe162;
Largura: 400px;
Altura: 500px;

.vermelho
Background-Color:#FF6464;
Largura: 300px;
Altura: 350px;

.verde
Background-Color:#91C483;
Largura: 200px;
Altura: 100px;
Posição: fixado;
Esquerda: 70%;
TOP: 50%;

P
preenchimento: 20px 0;
Alinhamento de texto: centro;
Fonte-família: 'Segoe Ui', Tahoma, Genebra, Verdana, Sans-Serif

No exemplo acima, apenas o Div Green recebe a posição fixa, portanto, quando você rola a página da web, o Div Green permanece fixo em sua posição em relação à janela do navegador.

Saída

A divisão verde foi atribuída com sucesso o posicionamento fixo.

Conclusão

A propriedade de posição do CSS especifica a posição de um elemento HTML em uma página da web, além disso, os valores que isso pode exibir são; estática, que é o valor padrão, o valor absoluto posiciona um elemento em relação ao seu elemento pai, o valor fixo posiciona um elemento em relação à janela do navegador, o valor relativo posiciona um elemento em relação à sua posição original e o valor pegajoso posiciona um elemento com um elemento com Respeito à posição de rolagem do usuário. A propriedade de posição e seus vários valores são ilustrados neste artigo com a ajuda de exemplos.