Este documento resume quatro aulas sobre posicionamento em CSS ministradas pelo professor Jolvani. Nas aulas, ele explica os três principais tipos de posicionamento: fluxo normal, float e absoluto. O professor demonstra como usar cada propriedade de posicionamento e como elas afetam a disposição dos elementos. Ele também cobre a propriedade z-index, que define a ordem de sobreposição quando elementos se sobrepõem.
3. Posicionamento (fluxo normal)- CSS
Bem vindos a aula de posicionamento
Posicionamento usando as propriedades
Três formas de Posicionamento
Precisamos lembrar dos tipos em bloco e in-line
Se não definirmos nenhum tipo de posicionamento
existe uma organização natural do navegador
O Fluxo normal exibe cada elemento na ordem
em que é colocado a marcação veja mais...
4. Posicionamento (fluxo normal)- CSS
O Fluxo normal exibe cada elemento na ordem (h1,h2,div,p...)
em que é colocado a marcação, veja mais...
Cada elemento em bloco aparecem na ordem em que são escritos no
documento html, são empilhados de cima para baixo representando o
fluxo normal. Cada novo elemento provoca uma quebra de linha e ocupa
toda largura do documento.
5. Posicionamento (fluxo normal)- CSS
Para ver os espaços que os elementos estão ocupando vamos colocar
uma borda em cada um deles
Adicione a parágrafo <p> no código acima...
Os elementos inline sua formatação se da na horizontal, pois eles não
provocam quebra de linha e dentro do box em que ela está;
Ao redimensionar nosso navegador, os elementos
Automaticamente se ajustam, verifique...
6. Posicionamento (fluxo normal)- CSS
Ao redimensionar nosso navegador, os elementos
Automaticamente se ajustam, verifique.
Essas são as regras do fluxo normal. Lembre-se temos ainda o float e
absoluto
7. Posicionamento (fluxo normal)- CSS
Esses posicionamentos são fundamentais para ajustarmos os elementos
nas páginas que construirmos...
Existem as propriedades para o sistema de posicionamento...
Position:static – representa exatamente o fluxo normal visto
anteriormente. Exemplo:
Usando position:static não será alterado se definirmos no css a propriedade
“left:160px” e “top:130px” por exemplo pois no fluxo normal declarando
static, seu texto fica estático....
8. Posicionamento (fluxo normal)- CSS
Alternado o valor de position:
Veja a disposição do titulo 2.
Experimente usar nos elementos in-line...
Então fluxo é a forma como os elementos estão
dispostos dentro de sua página.
10. Posicionamento (float)- CSS
Posicionamento float permite que reposicionamos os elementos fazendo
com que seu espaço original seja ocupado, diferentemente do fluxo
normal visto anteriormente.
Alterar cor de fundo elemento <p> e aumentar as dimensões dos elementos
h1 e h3 e p (somente a altura), depois usaremos a propriedade “float”
Float:left; faz com que os elementos flutuem à esquerda
(h1,h3,p)
Veja o resultado... Redimensione seu navegador e observe...
11. Posicionamento (float)- CSS
Lembrem-se: para fazer um menu horizontal ou itens flutuar para a
esquerda eu necessito da propriedade float...
12. Posicionamento (float)- CSS
Podemos também flutuar somente um ou alguns elementos, para isso
defina um id no html como “tit” por exemplo e atribua float:left para
ele. Verifique se o elemento seguinte não sobrepõem seu espaço.
Vamos ao exemplo:
Limpar o float para os outro elementos clear:left ou clear:both
17. Posicionamento (Absolute)- CSS
O posicionamento absoluto é regido pelas propriedades position, com
valores absolute e fixed (fixo).
Para esta aula remova todos os parágrafos do html anterior, e colocamos
uma <div>
No css deixamos apenas o elemento <h3>
18. Posicionamento (Absolute)- CSS
Verifique o exemplo:
O elemento 3 ocupou o lugar do elemento 2
Observe que a borda do elemento 2 ocupa o espaço do texto
Então 1 e 3 estão no fluxo normal e 2 absoluto de posicionamento
Alterar cor de fundo elemento 2
19. Posicionamento (Absolute)- CSS
O posicionamento absoluto funciona junto com outras propriedades:
Parece que o elemento 2 esta com o posicionamento mais abaixo
(top:50px), porém o seu posicionamento se dá através do elemento 1,
dessa forma as distâncias são iguais. Posicionamento absoluto.
No posicionamento estático (fluxo normal) não é permitido a propriedade
“left” e “top”
20. Posicionamento (Absolute)- CSS
Colocando Borda na div:
O contexto de posicionamento estabelece a origem de sistema de
coordenadas para posicionamento absoluto. A regra que regue o
posicionamento do elemento estabelece que os elementos posicionados
com a declaração absoluta serão deslocados como base para uma
determinação de coordenadas para o ancestral mais próximo...
Alterando o código da <div>
21. Posicionamento (Absolute)- CSS
<div>
#dois
Elemento 2 sobrepõem elemento 1: então elemento 2 posicionado agora
em relação ao <div>
22. Posicionamento (Absolute)- CSS
Altere o html tirando o elemento 2 da div e colocando abaixo, fora
dela...
Observe que o elemento 2, agora se posiciona em relação a janela do
Browser. Em relação ao body
23. Posicionamento (Absolute)- CSS
Retorne com os código anterior...
É possível usar um valor negativo também:
Ex: em #dois altere
Top:0px para top:-20px;
Diferença entre valor absoluto e valor fixed
Absoluto: muda quando usa-se uma barra de rolagem por exemplo:
Fixed: o elemento acompanha a rolagem, veja
25. Posicionamento (Z-Index)- CSS
Posicionamento em várias camadas: A propriedade z-index permite
posicionar os elementos em locais específicos, definindo qual vai a
frente ou atrás na apresentação do nosso browser.
Deixamos a página no
seguinte formato:
Elementos em bloco;
Quebra de linha;
Espaço h3 + quebra;
REVISANDO...
27. Posicionamento (Z-Index)- CSS
Lembrem do esquema de posicionamento: float:right;
Alterando para float:right;
Altera-se o posicionamento dos elementos;
28. Posicionamento (Z-Index)- CSS
Se eu quisesse quebrar, fazer com que o elemento azul ficasse na parte
de baixo.... float:left;
No elemento #três { clear: left; }
29. Posicionamento (Z-Index)- CSS
Outra característica importante, é quando flutua-se um elemento, somente
um, abre-se espação para outro elemento ocupar o espaço dele... Flutuando
elemento verde... float:left;
O elemento amarelo passou a ocupar a posição que estava sendo ocupada do
elemento 1 verde. Ficando posicionado atrás do elemento verde.
Com z-index nos definimos quem vem para frente ou quem vai para trás.
30. Posicionamento (Z-Index)- CSS
O outro foi o posicionamento absoluto...
O Elemento 1 verde saiu do fluxo e agora o elemento 2 amarelo passou
a ocupar aquela posição do verde.
Uma característica é quantos pixels acima ou abaixo queremos
posicionar.
31. Posicionamento (Z-Index)- CSS
Com o esquema de posicionamento absoluto o elemento corre a janela
quando temos a barra de rolagem
Mas se usarmos fixo (fixed)...
32. Posicionamento (Z-Index)- CSS
Onde entra o z-index: ele define ordem e a prioridade de apresentação
de cada um desses elementos:
Prioridade inferior aos elementos amarelo e azul.
33. Posicionamento (Z-Index)- CSS
Onde entra o z-index: ele define ordem e a prioridade de apresentação
de cada um desses elementos:
Colocando z-index: -2 no elemento amarelo (2), para que o z-index
funcione é necessário sair do fluxo normal, usar position...
34. Posicionamento (Z-Index)- CSS
Onde entra o z-index: ele define ordem e a prioridade de apresentação
de cada um desses elementos:
Nos 3 elementos