05-Alinhamento de elementos com CSS

Prévia do material em texto

N
Alinhamento de elementos com CSS
esta aula vamos abortar o posicionamento de elementos, que é
um assunto também relacionado ao critério de responsividade
de aplicações Web.
Existem quatro tipos de posicionamento: estático, relativo, absoluto e fixo
e todos se referem à posição onde cada elemento que estamos
construindo em nossas interfaces, diferenciando-se, cada um, de como o
posicionamento do elemento pai (container) o afeta.
O posicionamento padrão, ou seja, o que não precisamos declarar em
nossas folhas de estilo a não ser que precisemos forçar tal estilo num
determinado componente, é o estático, que se refere aos elementos do
tipo “bloco”, ou seja, cada elemento é posicionado “em cima” do próximo.
Lembre-se temos TAGs que criam um bloco (ocupam a largura toda do
contêiner pai, como as divs, por exemplo, e temos TAGS HTML cujo
tamanho é quebrado pelo seu conteúdo, com, por exemplo, o span.
De forma resumida a imagem abaixo mostra como as quatro
propriedades de posicionamento (position) afetam um componente,
quando aplicado a ele.
Posicionamento Relativo
 
O posicionamento relativo permite que, a partir de onde o elemento seria
renderizado originalmente, o desloquemos, de forma relativa, ou seja,
distanciando-se da posição original dele.
É importante sabermos que o posicionamento relativo deve estar
acompanhado de ao menos uma das quatro propriedades de CSS:
 
• top: deslocamento do topo do elemento
• right: deslocamento da direita do elemento
• left: deslocamento da esquerda do elemento
• botton: deslocamento da parte inferior do elemento
 
Normalmente usamos apenas um ou dois parâmetros simultaneamente,
que podem receber valores positivos e negativos e com unidades em
pixels, em, rem ou qualquer outra unidade de tamanhos do CSS.
 
Posicionamento absoluto
 
Quando definimos que um elemento receberá o posicionamento absoluto,
ele sai completamente do fluxo normal do documento, sem afetar o
posicionamento de nenhum outro elemento.
Entretanto é importante tomar cuidado com esse tipo de posicionamento,
pois ela é calculada em relação ao container pai do elemento.
Neste caso, o posicionamento absoluto faz com que o elemento comece
a ser exibido a partir da posição inicial do container pai, como se fosse o
primeiro elemento sendo renderizado e, a partir desta posição, podemos
os afastar com as mesmas propriedades do relativo, normalmente usando
um ou no máximo duas regras de afastamento.
 
Posicionamento fixo
 
O posicionamento fixo "cola" o componente independentemente da
rolagem da interface, ou seja, não importa o quanto o usuário “role” a
página, o posicionamento fixo mante o componente congelado em sua
posição inicial.
Este posicionamento tem o mesmo comportamento do absoluto,
entretanto a rolagem não interfere em seu posicionamento.
E, assim como os demais tipos de posicionamento, o fixo também pode
receber um ou dois parâmetros de deslocamento (top, left, right e/ou
botton).
Esse tipo de posicionamento pode parecer estranho inicialmente, mas é
amplamente usado em menus, aplicações de chat (mensagens) que são
exibidas de forma sobreposta à página, banners de alertas etc.
Existem outros tipos de posicionamento, entretanto estes são os principais
e normalmente utilizados. Ao final desta aula, você terá acesso à
documentação deste recurso onde poderá testar os demais tipos,
livremente. Não deixe, também, de assistir os vídeos associados à esta
aula.
 
 
Atividade extra
Não deixe de ler a documentação do W3C sobre posicionamentos,
disponível no link abaixo e, também, praticar bastante com exemplos
arbitrários e resolvendo problemas de seu dia a dia.
•
Link: https://www.w3schools.com/cssref/pr_class_position.asp
 
https://www.w3schools.com/cssref/pr_class_position.asp
Veja, também, a ferramenta abaixo que mostra em tempo real a alteração
dos posicionamentos:
 
https://www.w3schools.com/cssref/playit.asp?
filename=playcss_position&preval=initial
 
 
Referência Bibliográfica
Flatschart, F., HTML5 – Embarque imediato, Editora Brasport, 1ª Ed., 2011
Segurado, S. V., Projeto de Interface com Usuário, Editora Pearson, 1ªEd.,
2016
Frain, B., Responsive Web Design with HTML5 and CSS, Editora Packt
Publishing, 3ª Ed., 2020
Libby, A., Gupta G., Talesra A., Responsive Web Design with HTML5 and
CSS3 Essentials, Editora Packt Publishing, 1ª Ed., 2016
Kyrnin, J., Learning Responsive Web Design, Editora Addison-Wesley
Professional, 2017
Ir para questão
https://www.w3schools.com/cssref/playit.asp?filename=playcss_position&preval=initial