Position
A propriedade position trabalha com quatro valores: static (padrão), relative, absolute e fixed. Cada valor permite uma forma diferente de posicionar o elemento. E, dependendo do valor utilizado, outras cinco propriedades podem ser utilizadas em conjunto com position. São elas: top, right, bottom, left e z-index.
Essas outras cinco propriedades não funcionam com position: static. Ou seja, o position deverá ser relative, absolute ou fixed para que essas propriedades façam efeito sobre o posicionamento do elemento. Você vai ver mais sobre elas no decorrer da leitura.
position: static
O valor static é o padrão. Ou seja, se não existir uma definição de position, o valor que o navegador vai colocar é static. Por exemplo em:
article p {
color: #666;
}
Não foi declarada a propriedade position na regra para elementos p descendentes de article. Mas não é porque não foi declarada a propriedade, que ela não exista para o elemento. Todo elemento tem um posicionamento declarado, seja pelo desenvolvedor, seja pelo navegador. É como se o desenvolvedor tivesse escrito a regra da seguinte maneira:
article p {
color: #666;
position: static;
}
O posicionamento estático position: static, mantém os elementos no fluxo normal. Como os div.caixa são elementos de bloco display: block, no fluxo normal, eles se posicionam um abaixo do outro.
See the Pen CSS – Position – Static by Dennis Calazans (@denniscalazans) on CodePen.
position: relative
O posicionamento relativo é basicamente o estático, porém com as propriedades top, right, bottom, left e z-index habilitadas. Mas para que servem essas propriedades? A resposta é: para que seja feito o deslocamento a partir daquele ponto (topo, base ou laterais esquerda e direita). A propriedade z-index é responsável pela disposição dos elementos no eixo Z, como a posição em uma pilha de panquecas.
Atenção: Ao utilizar left e right ou top e bottom na mesma regra, o left e o top sempre terão prioridade.
Observe o exemplo abaixo e verifique as regras CSS. Repare que quando usamos left: 20px é 20px a partir de onde ele se encontrava enquanto estático. Sempre gosto de dizer:
É uma posição relativa a o quê?
É uma posição relativa ao local onde se encontrava enquanto estática.
See the Pen CSS – Position – Relative by Dennis Calazans (@denniscalazans) on CodePen.
position: fixed
O posicionamento fixo, poderia afirmar, é mais fácil de entender. Esse tipo de posicionamento utiliza o viewport como referência. Viewport é parte visiível do documento, ou seja a janela do seu navegador
O position: fixed também faz com que o elemento saia do fluxo normal. Veja no exemplo abaixo que somente Caixa 3 é position: fixed canto direito inferior do viewport. Esse tipo de posicionamento é bastante usado em menus que ficam fixos no topo ou na base da interface, também é usado para a criação de botões de voltar ao topo, como esse que está sendo usado no exemplo.
Como esse tipo de posicionamento tira o elemento Caixa 3 do fluxo natual, ela não mais permanece no “porta caixas”. É por isso que a Caixa 4 fica próxima da Caixa 2.
See the Pen CSS – Position – Fixed by Dennis Calazans (@denniscalazans) on CodePen.
position: absolute
Está aí! Esse tipo de posicionamento, quando bem compreendido, permitirá a montagem mais fácil de qualquer tipo de interface. Preste bastante atenção e se, por acaso, restar dúvidas, faça questão de saná-las o mais breve possível.
O posicionamento absoluto, antes de mais nada, precisa usar como referência os limites de elemento ascendente. Um elemento ascendenente é aquele que abraça um outro. Por exemplo, o UL é um ascendente de um LI.
Para que um elemento absoluto utilize os limites de um elemento ascentente, é preciso que esse elemento acima não seja posicionado estáticamente.
É um pouco confuso, não é? Mas você vai entender melhor se imaginar um carro. Um carro tem a base e as quatro rodas. Cada roda em um canto do carro. Nesse exemplo, o corpo do carro contém as rodas. As rodas são posicionadas absolutamente enquanto o carro pode ser qualquer coisa menos estático. Veja o código abaixo.
Quando um elemento é absoluto, ele anda conforme o seu ascendente não estático anda. Repare que o carro está no centro da tela, e as rodas tambem.
See the Pen CSS – Position – Absolute by Dennis Calazans (@denniscalazans) on CodePen.
E o z-index???
A propriedade z-index controla a posição do elemento em uma pilha quando eles se colidem. Normalmente, quando ocorre dos elementos serem posicionados de uma forma que ficam uns sobre os outros, aqueles que vem depois no código ficam mais acima. E esse comportamento pode ser manipulado através dessa propriedade.
Veja no exemplo abaixo as caixas posicionas de forma absoluta se empilhando naturalmente. Nesse caso, a Caixa 2 fica sobre a Caixa 1, a Caixa 3 fica sobre a Caixa 2 e assim por diante.
See the Pen CSS – Position – Z-index não definido by Dennis Calazans (@denniscalazans) on CodePen.
Você reparou na ordem natural? Aquele código HTML que vem depois fica mais acima. Agora vamos ver os elementos com a propriedade z-index declarada. Perceba a diferença.
See the Pen CSS – Position – Z-index by Dennis Calazans (@denniscalazans) on CodePen.
