aula 24,25,26 e 27. posicionamento

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;


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.


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


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

Technology