Aula 24,25,26 e 27. posicionamento

Posicionamento
CSS - Style Sheet
Professor: Jolvani
Aula 24,25,26 e 27

Posicionamento (fluxo normal)
CSS - Style Sheet
Professor: Jolvani
Aula 24

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...

 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.

 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...

 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

 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....

 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.

Posicionamento (float)
CSS - Style Sheet
Professor: Jolvani
Aula 25

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...

 Lembrem-se: para fazer um menu horizontal ou itens flutuar para a
esquerda eu necessito da propriedade float...

 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

 Limpar o float para os outro elementos clear:left ou clear:both

 Podemos usar float:right -> flutuar à direita.
 Ex: flutuando elementos inline: uma imagem à direita:
 Vamos adequar nosso documento para ilustrar um novo exemplo
 Aumentar parágrafo 2. Conhecimento Multidisciplinar (copie e cole)
 Retirar float:

 Faremos um destaque em parte do texto:

Posicionamento (absoluto)
CSS - Style Sheet
Professor: Jolvani
Aula 26

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>

 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

 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”

 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>

 <div>
 #dois
 Elemento 2 sobrepõem elemento 1: então elemento 2 posicionado agora
em relação ao <div>

 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

 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

Posicionamento (Z-index)
CSS - Style Sheet
Professor: Jolvani
Aula 27

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...

 Lembrem do esquema de posicionamento: float:left;

 Lembrem do esquema de posicionamento: float:right;
 Alterando para float:right;
 Altera-se o posicionamento dos elementos;

 Se eu quisesse quebrar, fazer com que o elemento azul ficasse na parte
de baixo.... float:left;
 No elemento #três { clear: left; }

 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.

 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.

 Com o esquema de posicionamento absoluto o elemento corre a janela
quando temos a barra de rolagem
 Mas se usarmos fixo (fixed)...

 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.

 Colocando z-index: -2 no elemento amarelo (2), para que o z-index
funcione é necessário sair do fluxo normal, usar position...

 Nos 3 elementos

 A partir de agora podemos trabalhar com layout;
 Até a próxima aula.

Próxima Aula: Layout - Tableless

Aula 24,25,26 e 27. posicionamento

Mais conteúdo relacionado

Destaque

Semelhante a Aula 24,25,26 e 27. posicionamento

Mais de Jolvani Morgan

Último

Aula 24,25,26 e 27. posicionamento