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

Trs formas de Posicionamento

Precisamos lembrar dos tipos em bloco e in-line

Se no definirmos nenhum tipo de posicionamento

existe uma organizao natural do navegador

O Fluxo normal exibe cada elemento na ordem

em que colocado a marcao veja mais...

Posicionamento (fluxo normal)- CSS

O Fluxo normal exibe cada elemento na ordem (h1,h2,div,p...)

em que colocado a marcao, veja mais...

Cada elemento em bloco aparecem na ordem em que so escritos no
documento html, so 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 espaos que os elementos esto ocupando vamos colocar

uma borda em cada um deles

Adicione a pargrafo <p> no cdigo acima...

Os elementos inline sua formatao se da na horizontal, pois eles no

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 so as regras do fluxo normal. Lembre-se temos ainda o float e

absoluto

Posicionamento (fluxo normal)- CSS

Esses posicionamentos so fundamentais para ajustarmos os elementos

nas pginas que construirmos...

Existem as propriedades para o sistema de posicionamento...

Position:static representa
anteriormente. Exemplo:

exatamente

fluxo

normal

visto

Usando position:static no ser alterado se definirmos no css a propriedade

left:160px e top:130px por exemplo pois no fluxo normal declarando
static, seu texto fica esttico....

Posicionamento (fluxo normal)- CSS

Alternado o valor de position:

Veja a disposio do titulo 2.

Experimente usar nos elementos in-line...

Ento fluxo a forma como os elementos esto

dispostos dentro de sua pgina.

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

Posicionamento (float)- CSS

Posicionamento float permite que reposicionamos os elementos fazendo

com que seu espao original seja ocupado, diferentemente do fluxo
normal visto anteriormente.

Alterar cor de fundo elemento <p> e aumentar as dimenses 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 tambm 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 no sobrepem seu espao.

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
Retirar

pargrafo 2. Conhecimento Multidisciplinar (copie e cole)

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 pargrafos 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
Ento

que a borda do elemento 2 ocupa o espao do texto

1 e 3 esto 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), porm o seu posicionamento se d atravs do elemento 1,
dessa forma as distncias so iguais. Posicionamento absoluto.

No posicionamento esttico (fluxo normal) no 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 declarao absoluta sero deslocados como base para uma
determinao de coordenadas para o ancestral mais prximo...

Alterando o cdigo da <div>

Posicionamento (Absolute)- CSS

<div>

#dois

Elemento 2 sobrepem elemento 1: ento elemento 2 posicionado agora

em relao 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 relao a janela do

Browser. Em relao ao body

Posicionamento (Absolute)- CSS

Retorne com os cdigo anterior...

possvel usar um valor negativo tambm:

Ex: em #dois altere

Top:0px

para top:-20px;

Diferena 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 vrias camadas: A propriedade z-index permite

posicionar os elementos em locais especficos, definindo qual vai a
frente ou atrs na apresentao do nosso browser.

Deixamos a pgina no

seguinte formato:

Elementos em bloco;

Quebra de linha;

Espao 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 #trs { clear: left; }

Posicionamento (Z-Index)- CSS

Outra caracterstica importante, quando flutua-se um elemento,

somente um, abre-se espao para outro elemento ocupar o espao dele...
Flutuando elemento verde... float:left;

O elemento amarelo passou a ocupar a posio que estava sendo ocupada

do elemento 1 verde. Ficando posicionado atrs do elemento verde.

Com z-index nos definimos quem vem para frente ou quem vai para trs.

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 posio do verde.

Uma caracterstica 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 apresentao

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 apresentao

de cada um desses elementos:

Colocando z-index: -2 no elemento amarelo (2), para que o z-index

funcione necessrio sair do fluxo normal, usar position...

Posicionamento (Z-Index)- CSS

Onde entra o z-index: ele define ordem e a prioridade de apresentao

de cada um desses elementos:

Nos 3 elementos

Posicionamento (Z-Index)- CSS

A partir de agora podemos trabalhar com layout;

At a prxima aula.

Prxima Aula: Layout - Tableless