Posicionamento CSS - Style Sheet Professor: Jolvani Aula 24,25,26 e 27
PosicionamentoCSS - Style Sheet
Professor: Jolvani
Aula 24,25,26 e 27
Posicionamento (fluxo normal)
CSS - Style SheetProfessor: 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...
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.
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...
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
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....
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.
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...
Posicionamento (float)- CSS Lembrem-se: para fazer um menu horizontal ou itens flutuar
para a esquerda eu necessito da propriedade float...
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
Posicionamento (float)- CSS Limpar o float para os outro elementos clear:left ou clear:both
Posicionamento (float)- CSS 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:
Posicionamento (float)- CSS 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>
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
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”
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>
Posicionamento (Absolute)- CSS <div>
#dois
Elemento 2 sobrepõem elemento 1: então elemento 2 posicionado agora em relação ao <div>
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
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
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...
Posicionamento (Z-Index)- CSS
Lembrem do esquema de posicionamento: float:left;
Posicionamento (Z-Index)- CSS
Lembrem do esquema de posicionamento: float:right; Alterando para float:right;
Altera-se o posicionamento dos elementos;
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; }
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.
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.
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)...
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.
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...
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
Posicionamento (Z-Index)- CSS
A partir de agora podemos trabalhar com layout;
Até a próxima aula.
Próxima Aula: Layout - Tableless