CSS: Propriedade Position

Com posicionamento CSS podemos colocar um elemento em uma posição exata na página. Combinado com floats, o posicionamento abre muitas possibilidades para criação de layouts avançados

CSS: Propriedade Position

Com posicionamento CSS podemos colocar um elemento em uma posição exata na página. Combinado com floats, o posicionamento abre muitas possibilidades para criação de layouts precisos e avançados.

O princípio de posicionamento CSSConsidere a janela do navegador como um sistema de coordenadas:



O princípio de posicionamento CSS estabelece que você pode posicionar um elemento em qualquer lugar na tela usando um sistema de coordenadas.

Vamos supor que queremos posicionar um cabeçalho. Usando o box model (ver lição 9) o cabeçalho pode ser estilizado para ser apresentado como mostrado abaixo:



Se quisermos o cabeçalho posicionado a 100px do topo do documento e a 200px à esquerda, podemos usar o seguinte CSS:

h1 {
position:absolute;
top: 100px;
left: 200px;
}



O resultado é:



Como você pode ver, posicionar com CSS é uma técnica precisa para colocar elementos. É muito mais fácil do que usar tabelas, imagens transparentes e tudo mais.

Posicionamento absolutoUm elemento posicionado absolutamente não cria nenhum espaço no documento. Isto significa que não deixa nenhum espaço vazio após ser posicionado.

Para posicionar um elemento de forma absoluta a propriedade position deve ser definida para absolute. Você pode então usar as propriedades left, right, top, e bottom para definir as coordenadas e posicionar o elemento.

Para exemplificar o posicionamento absoluto escolhemos colocar quatro boxes nos quatro cantos da página:

#box1 {
position:absolute;
top: 50px;
left: 50px;
}

#box2 {
position:absolute;
top: 50px;
right: 50px;
}

#box3 {

position:absolute;
bottom: 50px;
right: 50px;
}

#box4 {
position:absolute;
bottom: 50px;
left: 50px;
}


Posicionamento relativoPara posicionar um elemento de forma relativa a propriedade position deve ser definida para relative. A diferença entre os dois tipos de posicionamento é a maneira como o posicionamento é calculado.

O posicionamento para posição relativa é calculado com base na posição original do elemento no documento. Isto significa uma movimentação do elemento para a esquerda, para a direita, para cima ou para baixo. Assim fazendo o elemento ocupa um espaço após ser posicionado.

Como exemplo de posicionamento relativo vamos tentar posicionar três imagens relativamente as suas posições originais na página. Notar como as imagens deixam um espaço vazio nas suas posições originais no documento:

#dog1 {
position:relative;
left: 350px;
bottom: 150px;
}
#dog2 {
position:relative;
left: 150px;
bottom: 500px;
}

#dog3 {
position:relative;
left: 50px;
bottom: 700px;
}



Texto traduzido por: Maurício Samy Silva

O melhor celular intermediário para importar?

Conteúdo relacionado

Realme GT Master: Celular Premium da marca chega ao Brasil; confira preços e ficha
Celulares

Realme GT Master: Celular Premium da marca chega ao Brasil; confira preços e ficha

Lançado dia 19 de outubro de 2021 no Brasil, o Realme GT Master Edition chega para ser o carro-chefe de tecnologias da fabricante.

Chefe da Ericsson critica proibição sueca do 5G da Huawei
Mercado Tech

Chefe da Ericsson critica proibição sueca do 5G da Huawei

Borje Ekholm diz que a ação contra seu rival prejudica a livre concorrência e o comércio.

Ericsson comprará Cradlepoint, empresa de rede sem fio dos Estados Unidos, por US $ 1,1 bilhão
Tecnologia

Ericsson comprará Cradlepoint, empresa de rede sem fio dos Estados Unidos, por US $ 1,1 bilhão

Foi anunciado hoje pela Ericsson que a empresa realizou a compra da companhia de redes sem fio dos EUA Cradlepoint. Confira quais são as intenções por trás.