A propriedade position em CSS é usada para definir a posição de um elemento na página. Através desta propriedade, você pode colocar qualquer atributo onde achar apropriado.
O atributo position especifica o tipo de posicionamento do elemento. Este atributo define o mecanismo de posicionamento utilizado para estabelecer o layout do elemento. Qualquer elemento pode ser posicionado, mas elementos absolutos ou fixos geram uma caixa em nível de bloco, independentemente do tipo do elemento em si. Um elemento relativamente posicionado é deslocado de sua posição padrão no fluxo normal.
O atributo position especifica o tipo de método de posicionamento aplicado ao elemento (estático, relativo, fixo, absoluto ou fixo):
Na verdade, os elementos são posicionados usando os atributos superior, inferior, esquerdo e direito. Entretanto, essas propriedades não têm efeito a menos que a propriedade position seja definida primeiro. Eles funcionam de forma diferente dependendo do valor da posição.
1. Posicionamento estático: estático
Os elementos HTML são posicionados estáticos por padrão.
Os elementos posicionados estáticos não são afetados pelos atributos superior, inferior, esquerdo e direito.
Um elemento com position: static não é posicionado de forma especial, é sempre posicionado de acordo com o fluxo normal da página:
Exemplo:
<!DOCTYPEhtml><html><head><style>div{altura:100px;border:1pxsolidblack;}div.static{largura:130px;altura:50px;cor de fundo:#CCC;altura da linha:50px;texto -align:center;position:static;top:50px;left:20px;}</style></head><body><div><divclass=static>item;</div></div></body </html>Resultados em execução:
2. Posicionamento relativo: relativo
Exemplo:
<html><head><styletype=text/css>#item1{width:100px;height:100px;background-color:green;}#item2{width:100px;height:100px;background-color:red;}< /style></head><body><divid=content><divid=item1>item1</div><divid=item2>item2</div></div></body></html>Resultados em execução:
Se você alterar o arquivo de estilo CSS no código da seguinte maneira:
<html><head><styletype=text/css>#item1{largura:100px;altura:100px;cor de fundo:verde;}#item2{largura:100px;altura:100px;cor de fundo:vermelho;posição: relativo;esquerda:20px;top:20px;}</style></head><body><divid=content><divid=item1>item1</div><divid=item2>item2</div></div </body></html>Resultados em execução:
Resumo: Relativo é um deslocamento relativo à posição do fluxo normal do documento. A posição originalmente ocupada ainda existe, o que significa que não afetará a posição dos elementos subsequentes. Esquerda significa deslocamento em relação ao lado direito da posição original e topo significa deslocamento em relação à parte inferior da posição original. Quando esquerda e direita existem ao mesmo tempo, apenas esquerda é válida. Quando superior e inferior existem ao mesmo tempo, apenas superior é válido. O deslocamento relativo baseia-se no lado superior esquerdo da margem do objeto.
3. Posicionamento absoluto: absoluto
Exemplo:
<html><head><styletype=text/css>#item1{largura:100px;altura:100px;cor de fundo:verde;}#item2{largura:100px;altura:100px;cor de fundo:vermelho;}# content{margin-left:100px;margin-top:100px;}</style></head><body><divid=content><divid=item1>item1</div><divid=item2>item2</div </div></body></html>Resultados em execução:
Ao modificar arquivos de estilo CSS:
<html><head><styletype=text/css>#item1{largura:100px;altura:100px;cor de fundo:verde;}#item2{largura:100px;altura:100px;cor de fundo:vermelho;posição: absoluto;left:20px;top:20px;}#content{margin-left:100px;margin-top:100px;}</style></head><body><divid=content><divid=item1>item1< /div><divid=item2>item2</div></div></body></html>Resultados em execução:
Pode-se observar que quando o valor do atributo position do elemento pai é o valor padrão (estático), o valor absoluto é posicionado em relação à janela do navegador.
Se o valor do atributo position do conteúdo for definido como um valor não padrão, absoluto será posicionado em relação ao elemento pai:
<html><head><styletype=text/css>#item1{largura:100px;altura:100px;cor de fundo:verde;}#item2{largura:100px;altura:100px;cor de fundo:vermelho;posição: absoluto;esquerda:20px;topo:20px;}#content{margem-esquerda:100px;margem-topo:100px;posição:relativo}</style></head><body><divid=content><divid=item1 >item1</div><divid=item2>item2</div></div></body></html>Resultados em execução:
Continue modificando o estilo CSS:
<html><head><styletype=text/css>#item1{largura:100px;altura:100px;cor de fundo:verde;}#item2{largura:100px;altura:100px;cor de fundo:vermelho;}# content{margin-left:100px;margin-top:100px;position:absolute;padding:20px;border:10pxsolidblack;}</style></head><body><divid=content><divid=item1>item1< /div><divid=item2>item2</div></div></body></html>Resultados em execução:
Você notou a mudança? Quando o div externo é definido como absoluto, a largura do div externo muda de 100% para automático.
Quando você define a propriedade position de um elemento como absoluta ou fixa, três coisas acontecem:
(1) Mova o elemento uma camada na direção do eixo Z. O elemento está fora do fluxo normal, portanto não ocupa mais o espaço da camada original e cobrirá os elementos da camada inferior.
(2) O elemento se tornará um elemento de nível de bloco, o que equivale a definir display: block; para o elemento (forneça um elemento embutido, como <span>, e após definir absoluto, você descobrirá que ele pode definir o largura e altura).
(3) Se o elemento for um elemento de nível de bloco, a largura do elemento muda da largura original: 100% (ocupa uma linha) para automática.
4. Posicionamento fixo: fixo
Posicionamento fixo é posicionar o elemento em relação à janela do navegador. O elemento que usa posicionamento fixo não se moverá devido à rolagem da janela do navegador, como se estivesse fixo na página. página. Isto é conseguido usando posicionamento fixo.
Exemplo:
<!DOCTYPEhtml><html><head><metacharset=UTF-8><title></title><style>.out{border:red1pxsolid;height:600px;width:500px;}.in{border:blue1pxsolid; altura:200px;largura:200px;}</style></head><body><divclass=outstyle=position:relative;><divclass=instyle=background-color:wheat;></div><divclass=instyle =cor de fundo:vermelho;posição:fixo;esquerda:20px;fundo:10px;></div><divclass=instyle=cor de fundo:azul;></div></div></body></ HTML>Resultados em execução:
5. Posicionamento pegajoso: pegajoso
O posicionamento fixo é diferente dos quatro métodos de posicionamento apresentados anteriormente. É como uma combinação de posicionamento relativo e posicionamento fixo. Quando a página é rolada, seu efeito é o mesmo que o posicionamento relativo. aparecerá novamente. Por exemplo, o menu de navegação em algumas páginas da web está em sua posição padrão quando a página é carregada e é fixado no topo da página quando rolamos para baixo.
Exemplo:
<!DOCTYPEhtml><html><head><metacharset=UTF-8><title></title><style>.out{border:red1pxsolid;height:600px;width:500px;}.in{border:blue1pxsolid; altura:200px;largura:250px;}</style></head><body><divclass=out><divclass=instyle=background-color:wheat;></div><divclass=instyle=background-color: vermelho;></div><divclass=instyle=background-color:blue;></div></div></body></html>Resultados em execução:
