A posição dos elementos HTML desempenha um papel vital na organização dos componentes da página da web. Mais especificamente, a posição dos elementos pode ser ajustada utilizando o CSS “posição" propriedade. Esta propriedade pode ser associada a propriedades de deslocamento, como propriedades superior, esquerda, direita e inferior, fornecendo valores específicos para ajustar o elemento na página. No entanto, o "absoluto”Os elementos posicionados podem ser ajustados em relação ao elemento posicionado mais próximo.

Este post explicará o posicionamento absoluto do CSS.

Propriedade "Posição" CSS

O "posição”A propriedade no CSS pode ser utilizada para ajustar a posição do elemento. Diferentes valores da propriedade de posição são fixos, absolutos, relativos, estáticos e pegajosos. Esses valores são definidos com as propriedades de deslocamento, como topo, direita, esquerda e inferior, para ajustar a posição do elemento.

Como aplicar o posicionamento absoluto do CSS?

O posicionamento absoluto do elemento pode ser aplicado usando o CSS “posição”Propriedade com o valor“absoluto”. O elemento com a posição absoluta é ajustado correspondente ao seu elemento pai posicionado mais próximo. Mas se o ancestral não estiver posicionado, ele se ajustará em relação à seção corporal do documento.

Exemplo

Vamos entender o conceito com um exemplo prático.

Etapa 1: Crie um arquivo HTML

No arquivo html, dentro do elemento corporal, adicione uma div com o nome da classe “principal”. Em seguida, dentro da div, adicione uma tag html associada aos seguintes atributos:

• • ““src”Fornece um link para a imagem.
  • ““aula”É usado no CSS para estilizar os elementos.
  • ““alt”O atributo especifica o texto que mostra no lugar da imagem se a imagem não conseguir carregar na página.
  • ““alt”O atributo especifica o texto que mostra na página no lugar da imagem se a imagem não conseguir carregar na página.

Em seguida, adicione outra divisão contendo o cabeçalho e os elementos H1 e P do parágrafo:

O posicionamento absoluto do CSS

Hello Linuxhint Team!

No CSS, várias propriedades de estilo são utilizadas para decorar os elementos HTML.

Etapa 2: Estilo "todos" elementos

*
Fonte-família: Verdana, Genebra, Tahoma, Sans-Serif;

Os elementos HTML são estilizados usando o “família de fontes”Propriedade com o valor“Verdana, Genebra, Tahoma, Sans-Serif”. Esta lista de valores garante que, se o navegador não suportar o primeiro estilo, o outro será aplicado.

Etapa 3: Div "Home" Style "Home"

.lar
Posição: Absoluto;
Top: 50px;
Esquerda: 45px;

Abaixo estão as propriedades aplicadas ao “larDiv:

• • ““posição”Propriedade define a posição do elemento. Aqui, o adicionado “absoluto”Colocará o elemento em relação à seção corporal do HTML.
  • ““principal”A propriedade é utilizada para o ajuste vertical do elemento.
  • ““esquerda”A propriedade é usada para o ajuste horizontal do elemento.

Etapa 4: estilo “conteúdo” div

.contente
Background-Color: CadetBlue;
Largura: 300px;
Altura: 250px;
preenchimento-esquerda: 40px;
margem-esquerda: 80px;

Abaixo estão as propriedades CSS que são aplicadas ao “contenteDiv:

• • ““cor de fundo”Propriedade define a cor de fundo do elemento.
  • ““largura”Propriedade define a largura do elemento.
  • ““altura”Propriedade define a altura do elemento.
  • ““preenchimento-esquerda”A propriedade está definida para adicionar espaço ao lado esquerdo do conteúdo do elemento.
  • ““margem-esquerda”Propriedade especifica o espaço no lado esquerdo do elemento.

Neste ponto, nossa página da web ficará assim:

Pode ser visto a partir do resultado acima, a imagem da casa da div é colocada a 50px da parte superior e 45px da esquerda do corpo do documento. Além disso, a posição da divisão é definida em relação à seção corporal do HTML.

Como ajustar a posição do elemento "relativa" ao elemento pai posicionado?

Esta seção o guiará sobre o ajuste da posição do elemento em relação à posição mais próxima do elemento pai.

Defina a propriedade "Posição" de "Conteúdo" Div

Posição: relativa;

Para ajustar a posição do elemento em relação ao elemento pai, defina o “posição”Propriedade do elemento pai para“relativo" valor.

Defina a propriedade "Posição" do elemento "IMG"

.lar
Posição: Absoluto;
topo: 100px;
Esquerda: 220px;

Aqui:

• • ““posição”Propriedade com o valor definido como“absoluto”Será posicionado em relação ao elemento pai (ou seja, o conteúdo da posição da div é definido com o valor relativo).
  • ““principal”A propriedade é utilizada para definir a posição do elemento a partir do topo.
  • ““esquerda”A propriedade é utilizada para definir a posição do elemento da esquerda.

Saída

Pode ser visto pelo resultado que a imagem foi posicionada em relação à sua divis.

Conclusão

O CSS “posição”A propriedade é utilizada para definir a posição dos elementos HTML. Esta propriedade pode ser valorizada como fixa, relativa, absoluta, pegajosa e estática. O "absoluto”O valor posicionará o elemento correspondente ao seu elemento pai posicionado próximo. Este post explicou o posicionamento absoluto do CSS com um exemplo prático.