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. Essa propriedade pode ser associada a propriedades de deslocamento, como as propriedades superior, esquerda, direita e inferior, fornecendo valores específicos para ajustar o elemento na página. No entanto, o ' absoluto ”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' do CSS
O ' posição ” em CSS pode ser utilizada para ajustar a posição do elemento. Diferentes valores da propriedade position são fixos, absolutos, relativos, estáticos e fixos. Esses valores são definidos com as propriedades de deslocamento, como superior, 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 de acordo com seu elemento pai posicionado mais próximo. Mas se o ancestral não estiver posicionado, ele se ajustará em relação à seção do corpo do documento.
Exemplo
Vamos entender o conceito com um exemplo prático.
Etapa 1: criar um arquivo HTML
No arquivo HTML, dentro do elemento body, adicione um div com o nome da classe “ a Principal ”. Em seguida, dentro do div criado, adicione uma tag HTML associada aos seguintes atributos:
-
- “ origem ” fornece um link para a imagem.
- “ aula ” é usado no CSS para estilizar os elementos.
- “ tudo ” especifica o texto que aparece no lugar da imagem se a imagem não carregar na página.
- “ tudo ” especifica o texto que aparece na página no lugar da imagem se a imagem não carregar na página.
Em seguida, adicione outro div contendo o cabeçalho e os elementos h1 e p do parágrafo:
< div aula = 'a Principal' >< div aula = 'contente' >
< img origem = 'images/linuxlogo.png' aula = 'casa' tudo = 'logotipo linux' largura = '80px' >
< h1 > O posicionamento absoluto do CSS h1 >
< p > Olá equipe Linuxhint ! p >
div >
div >
Em CSS, várias propriedades de estilo são utilizadas para decorar os elementos HTML.
Passo 2: Estilize “todos” os elementos
* {família da fonte: Verdana, Geneva, Tahoma, sans-serif;
}
Os elementos HTML são estilizados usando o “ família de fontes ” propriedade com o valor “ Verdana, Genebra, Tahoma, sem serifa ”. Essa lista de valores garante que, se o navegador não suportar o primeiro estilo, o outro será aplicado.
Passo 3: Estilize o div “home”
.casa {posição: absoluta;
topo: 50px;
esquerda: 45px;
}
Abaixo estão as propriedades aplicadas ao “ casa ” div:
-
- “ posição ” define a posição do elemento. Aqui, o adicionado “ absoluto ” colocará o elemento relativo à seção do corpo do HTML.
- “ topo ” é utilizada para o ajuste vertical do elemento.
- “ deixou ” é usada para o ajuste horizontal do elemento.
Etapa 4: estilizar div “conteúdo”
.contente {cor de fundo: cadetblue;
largura: 300px;
altura: 250px;
padding-left: 40px;
margem esquerda: 80px;
}
Abaixo estão as propriedades CSS que são aplicadas ao “ contente ” div:
-
- “ cor de fundo ” define a cor de fundo do elemento.
- “ largura ” define a largura do elemento.
- “ altura ” define a altura do elemento.
- “ padding-left ” é definida para adicionar espaço ao lado esquerdo do conteúdo do elemento.
- “ margem esquerda ” especifica o espaço no lado esquerdo do elemento.
Neste ponto, nossa página da Web ficará assim:
Pode ser visto no resultado acima que a imagem do div home é colocada a 50px da parte superior e 45px da esquerda do corpo do documento. Além disso, a posição do div inicial é definida em relação à seção do corpo do HTML.
Como ajustar a posição do elemento “relativo” ao elemento pai posicionado?
Esta seção irá orientá-lo sobre como ajustar a posição do elemento em relação ao elemento pai da posição mais próxima.
Defina a propriedade “position” do div “content”
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 “position” do elemento “img”
.casa {posição: absoluta;
topo: 100px;
esquerda: 220px;
}
Aqui:
-
- “ posição ” com o valor definido como “ absoluto ” será posicionado em relação ao elemento pai (ou seja, a posição div do conteúdo é definida com o valor relativo).
- “ topo ” é utilizada para definir a posição do elemento a partir do topo.
- “ deixou ” é utilizada para definir a posição do elemento à esquerda.
Saída
Pode-se ver no resultado que a imagem foi posicionada em relação ao seu div pai e parece adequada.
Conclusão
O CSS “ posição ” é utilizada para definir a posição dos elementos HTML. Essa propriedade pode ser avaliada como fixa, relativa, absoluta, permanente e estática. O ' absoluto ” irá posicionar o elemento correspondente ao seu elemento pai posicionado próximo. Este post explicou o posicionamento absoluto do CSS com um exemplo prático.