Usando a posição no CSS

CSS fornece propriedades diferentes para estilizar as páginas da web criadas em HTML. Usando essas propriedades, você pode projetar elementos diferentes. Uma dessas propriedades mais fantásticas é o “posição" propriedade. CSS “posição”A propriedade é uma das propriedades mais comuns e essenciais utilizadas para ajustar a posição dos elementos HTML.

Este manual o guiará sobre a propriedade CSS Position. Então, vamos começar.

O que é a propriedade "posição" CSS?

No CSS, o “posição”É usado para especificar onde um elemento aparecerá na página com base em sua posição. Combinando com as propriedades CSS superior, direita, inferior e esquerda, determina onde o elemento será colocado.

Sintaxe

A sintaxe da propriedade de posição CSS é dada abaixo:

Posição: valores

No lugar de "valor”, Você pode definir a posição dos elementos como“estático","relativo","absoluto", e "fixo”.

Vamos dar uma olhada em cada valor com exemplos para entender como eles afetam a posição dos elementos da página.

Exemplo

No HTML, adicionaremos dois recipientes dentro da etiqueta corporal e atribuiremos o nome da classe ao primeiro div como “Div1”E a segunda div como“div2”:

Div 1
Div 2

Depois disso, iremos estilizar o corpo da página da web usando “corpo”No CSS e defina a cor de fundo do corpo como“RGB (127, 255, 212)”:

corpo
Background-Color: RGB (127, 255, 212);

Pode -se ver que a cor de fundo é aplicada na página da web:

Em nosso arquivo CSS, use “div”Para aplicar as mesmas propriedades aos contêineres de uma só vez. Ajuste a largura e a altura da div como “100px”E a margem como“30px”. Para definir a forma das divs, use o “Radio de fronteira”Propriedade e defina seu valor como“30px”. Em seguida, ajuste o texto da div usando o “alinhamento de texto”Propriedade para definir o texto div no“CentroPosição e a “altura da linha"Propriedade como"100px”:

div
Largura: 100px;
Altura: 100px;
margem: 30px;
Radio de fronteira: 10px;
Alinhamento de texto: centro;
altura da linha: 100px;

Depois disso, defina a cor da div para diferenciá -los. Para fazer isso, use “.Div1”Para acessar a primeira div e definir sua cor de fundo como“RGB (236, 226, 128)”:

.div1
Background-Color: RGB (236, 226, 128);

Agora, utilize “.div2”Para acessar a segunda div e definir sua cor de fundo como“RGB (187, 166, 214)”:

.div2
Background-Color: RGB (187, 166, 214);

O resultado do código acima da mencionação é dado abaixo:

O que é posição "estática" no CSS?

““estático”É usado para definir a posição em relação ao fluxo de página normal. É definido por padrão. Além disso, as propriedades superior, inferior, esquerda e direita não têm efeito.

Exemplo

Aqui, definiremos a posição de ambos os div como estáticos. Observe que todas as outras propriedades de ambos os contêineres permanecerão os mesmos:

.div1
..
Posição: estática;

.div2
..
Posição: estática;

Você pode ver que os divs estão posicionados na posição original:

O que é posição "relativa" no CSS?

Para definir a posição do elemento em relação à sua posição normal, o “relativo”O valor da propriedade de posição é utilizado.

Exemplo

Vamos definir a posição de “Div1" como "relativo" e "div2" como "absoluto”. Aqui, a segunda div está posicionada de acordo com o Div1:

.div1
..
Posição: relativa;

.div2
..
Posição: Absoluto;

Aqui está o resultado que demonstra que o div2 é ajustado de acordo com a posição da div 1:

O que é a posição "fixa" no CSS?

Os elementos HTML podem ser fixados no navegador usando o “fixo”Valor da propriedade de posição. A posição dos elementos fixos é determinada pela viewport, a área do documento que é visível no momento. Usando a janela do navegador como referência, esse elemento fixo está posicionado em relação a ele.

Exemplo

Vamos definir a posição de “Div1" como "fixo" e "div2" como "estático”. Aqui, usaremos o valor estático para definir a posição de “div2”De acordo com o fluxo de página normal:

.div1
..
Posição: fixado;

.div2
..
Posição: estática;

Aqui, você pode ver que a posição de “Div1"É fixo e"div2”Está definido de acordo com o fluxo da página:

Qual é a posição "absoluta" no CSS?

Em "absolutoPosicionamento, o elemento é posicionado em relação ao primeiro elemento pai, que não é estático. Além disso, um elemento pode ser posicionado em qualquer lugar em uma página usando posicionamento absoluto.

Exemplo

Vamos definir a posição de “Div1" como "relativo" e "div2" como "absoluto”. Depois disso, usaremos o “fundo"Propriedade como"5px”Para definir o div2 na parte inferior da página:

.div1
..
Posição: relativa;

.div2
..
Posição: Absoluto;
Inferior: 5px;

A imagem a seguir mostra que o div2 está posicionado na parte inferior da página:

É isso! Nós explicamos a descrição da propriedade de posição em detalhes.

Conclusão

Para definir a posição do elemento html, o “posição”A propriedade do CSS é utilizada. A propriedade de posição suporta quatro valores diferentes, como estática, relativa, fixa e absoluta. Neste artigo, explicamos a propriedade de posição em detalhes e fornecemos exemplos para todos os seus valores.