- A propriedade Position e seus valores
- Aplicações, exemplos e dicas
1 - A propriedade Position e seus valores
A propriedade CSS position tem função - bem como diz o nome - de posicionar o elemento HTML de várias formas. É sempre seguida de outras propriedades como top e left ou bottom e right. Com elas podemos determinar o comportamento do elemento diante dos outros, da página e da barra de rolagem. Para apresentar a position, temos os seguintes valores:
- static (padrão) - trata o elemento como outro qualquer, organizados em ordem.
- absolute - o elemento é posicionado baseando-se nas margens do elemento pai.
- fixed - trata o elemento baseando-se nas margens da tela, porém ele fica fixo, não é rolado junto com a ScrollBar.
- relative - o elemento é posicionado baseando-se na sua posição original.
Sei que ainda devem estar confusos, mas já já irá tudo ficar claro. Continuando...A propriedade position não trabalha sozinha, logo, não adianta esperarmos que o elemento se ajuste por mágica. Basicamente, primeiro atribuímos o comportamento dele, depois os valores de suas margens, baseadas no comportamento pré-atribuído. As propriedades que informam tais valores são:
- left - distância (em px ou em %) da esquerda.
- top - distância (em px ) do topo.
- right - distância (em px ou em %) da direita.
- bottom - distância (em px ) da parte inferior.
É claro que se você usa uma propriedade definindo um distância na horizontal, não precisa usar outra, ou seja, se usar left não convém usar right. O mesmo ocorre na vertical, use top OU bottom.
Vamos ao primeiro exemplo, criei uma div "pai" e outra "filho" para demonstrar.
<body>
<div id="pai">
Pai
<div id="filho">
Filho
</div>
</div>
</body>
Agora, vamos dar estilo, com o CSS. Adicionei a div pai, uma position relative, que vai a posicionar em relação a sua posição original. E a div filho não alterei nada, ou seja, está static.
#pai{
width:800px;
height:300px;
background:#0CF;
text-align:center;
font-size:24px;
position:relative;
left:20%; //20% da esquerda da posição original
top:200px; // 200px do topo da posição original
}
#filho{
width:200px;
height:100px;
background:#000033;
font-size:24px;
color:#fff;
}
Perceba que o filho está abaixo do texto "pai".
Agora vamos mudar a position do filho para relative. Não irá acontecer nada, apenas se adicionarmos alguma propriedade de distancia. No caso, usei right.
#filho{
width:200px;
height:100px;
background:#000033;
font-size:24px;
color:#fff;
position:relative;
right:100px;
}
 |
| O filho ainda está abaixo do texto "pai", e se deslocou 100px do seu right original |
#filho{
width:200px;
height:100px;
background:#000033;
font-size:24px;
color:#fff;
position:absolute;
right:100px;
}
Se eu zerasse o top e left do filho, ele se "encaixaria" no canto superior esquerdo do pai, o que não acontece se eu usasse um position: relative .
#pai{
width:800px;
height:300px;
background:#0CF;
text-align:center;
font-size:24px;
position:relative;
left:20%;
top:800px;
}
#filho{
width:200px;
height:100px;
background:#000033;
font-size:24px;
color:#fff;
position:fixed;
top:0;
left:0;
}
Bom, assim finalizamos essa parte de position, é interessante que você esteja manjando bem disso, para um melhor desempenho. Agora vamos ao próximo tópico.
Aqui seguem alguns itens que acho bem legais de se basear pra fazer um layout funcional.
2.1)
Divida o layout em colunas simples, e adicione as outras internamente delas, assim:
A grandes DIVs (que abrangem muitas outras divs) podem ser posicionadas com relative, as internas com absolute. Assim sendo, você pode organizar de maneira mais fácil o conteúdo da página. Lembrando que nem sempre é assim, mas é o que eu recomendo e costuma dar certo.
2.2)
A propriedade z-index pode ser de grande ajuda para a visibilidade dos elementos. Basicamente, você atribui índices aos elementos, em que os que tiverem índices maiores ficaram por cima, na camada mais visível, já os menores índices ficaram por baixo. Deem uma pesquisada :).
2.3)
Um bom uso para position: fixed é para menus, anúncios, boxes, ícones, em que você queira deixá-los sempre visíveis na página, independentemente da posição da barra de rolagem, chamando assim, a atenção do leitor.
2.4)
Use a propriedade margin para alinhar o elemento no centro e não position. Lembrando que para centralizar basta aplicar um auto na parte que se refere a horizontal. (margin: 2px auto)
Evite usar margin para posicionar o elemento, use apenas como medida de afastamento.
2.5)
Usando float: left e display:inline-block (ou inline) em elementos posicionados em linha pode ajudar bastante, mas cuidado, do mesmo jeito que ajuda, pode atrapalhar!
2.6)
Procure usar sempre o mesmo tipo de valor para determinar as positions, ou seja, não misture valores em porcentagem com em pixels ! Se usar porcentagem nas medidas horizontais, tente usar sempre porcentagem, e o mesmo com pixels. Lembrando que para valores de medidas na vertical, porcentagem não funciona! Logo, top: 20% não terá resultado.
E é isso galera! Espero ter ajudado...Se gostou, por favor siga nosso blog, curta nossa página no facebook e divulgue, ajude-nos a crescer! Qualquer crítica, dúvida ou sugestão, comente aqui em baixo ;).
2.2)
A propriedade z-index pode ser de grande ajuda para a visibilidade dos elementos. Basicamente, você atribui índices aos elementos, em que os que tiverem índices maiores ficaram por cima, na camada mais visível, já os menores índices ficaram por baixo. Deem uma pesquisada :).
2.3)
Um bom uso para position: fixed é para menus, anúncios, boxes, ícones, em que você queira deixá-los sempre visíveis na página, independentemente da posição da barra de rolagem, chamando assim, a atenção do leitor.
2.4)
Use a propriedade margin para alinhar o elemento no centro e não position. Lembrando que para centralizar basta aplicar um auto na parte que se refere a horizontal. (margin: 2px auto)
Evite usar margin para posicionar o elemento, use apenas como medida de afastamento.
2.5)
Usando float: left e display:inline-block (ou inline) em elementos posicionados em linha pode ajudar bastante, mas cuidado, do mesmo jeito que ajuda, pode atrapalhar!
2.6)
Procure usar sempre o mesmo tipo de valor para determinar as positions, ou seja, não misture valores em porcentagem com em pixels ! Se usar porcentagem nas medidas horizontais, tente usar sempre porcentagem, e o mesmo com pixels. Lembrando que para valores de medidas na vertical, porcentagem não funciona! Logo, top: 20% não terá resultado.
E é isso galera! Espero ter ajudado...Se gostou, por favor siga nosso blog, curta nossa página no facebook e divulgue, ajude-nos a crescer! Qualquer crítica, dúvida ou sugestão, comente aqui em baixo ;).
Categorias:
0 Comentários
