Técnicas e 
processos de 
produção 
Profº Ritielle Souza 
Aula 07
CAMADAS RELATIVAS 
Quando utilizamos a camada relativa, ela está 
presa na página, não tem z-index e nem 
posicionamento a...
CAMADAS RELATIVAS 
Se quiser uma camada ao lado da outra tem que 
ser colocado através da folha de estilo float:left; 
na ...
CAMADAS RELATIVAS 
#fundo{ 
margin-left:auto; 
margin-right:auto; 
width:740px; 
height:440px; 
background-color:yellow; 
...
CAMADAS RELATIVAS 
#camada1{ 
position:relative; 
width:150px; 
height:200px; 
background-color:red; 
text-align:center; 
...
CAMADAS RELATIVAS 
#camada2{ 
position:relative; 
width:150px; 
height:200px; 
background-color:yellow; 
text-align:center...
CAMADAS RELATIVAS 
#camada3{ 
position:relative; 
width:150px; 
height:200px; 
background-color:orange; 
text-align:center...
CAMADAS RELATIVAS 
<html> 
<head> 
<title>Camadas Relativas</title> 
<link rel="stylesheet" href="relativas1.css" 
type="t...
TABLELESS 
<div id="camada2"> Teste de camadas 
relativas</div> 
<div id="camada3"> Teste de camadas 
relativas</div> 
</d...
TABLELESS 
Camada com 
clear:left; 
Se tivesse 
com 
float:left 
estaria aqui.
Próximos SlideShares
Carregando em…5
×

Técnicas e processos - HTML / CSS - aula 7

233 visualizações

Publicada em

Curso design - Anhanguera Unidade Brigadeiro

Publicada em: Design
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Técnicas e processos - HTML / CSS - aula 7

  1. 1. Técnicas e processos de produção Profº Ritielle Souza Aula 07
  2. 2. CAMADAS RELATIVAS Quando utilizamos a camada relativa, ela está presa na página, não tem z-index e nem posicionamento absolute O posicionamento das camadas relativas se faz por encaixe.
  3. 3. CAMADAS RELATIVAS Se quiser uma camada ao lado da outra tem que ser colocado através da folha de estilo float:left; na camada anterior. Para quebrar a sequência de encaixe, colocar na camada que não será encaixada a opção: clear:left;
  4. 4. CAMADAS RELATIVAS #fundo{ margin-left:auto; margin-right:auto; width:740px; height:440px; background-color:yellow; margin-top:auto; } Para trabalhar com camadas relativas precisamos de um fundo, um “container” onde armazenar suas camadas relativas. Camada 01 Camada 02 Container ou fundo
  5. 5. CAMADAS RELATIVAS #camada1{ position:relative; width:150px; height:200px; background-color:red; text-align:center; color:#ffffff; border:3px solid yellow; float:left; }
  6. 6. CAMADAS RELATIVAS #camada2{ position:relative; width:150px; height:200px; background-color:yellow; text-align:center; color:#666666; border:3px solid red; float:left; }
  7. 7. CAMADAS RELATIVAS #camada3{ position:relative; width:150px; height:200px; background-color:orange; text-align:center; color:#ffffff; border:3px solid blue; clear:left; }
  8. 8. CAMADAS RELATIVAS <html> <head> <title>Camadas Relativas</title> <link rel="stylesheet" href="relativas1.css" type="text/css"> </head> <body> <center><div id="fundo"></center> <div id="camada1"> Teste de camadas relativas</div>
  9. 9. TABLELESS <div id="camada2"> Teste de camadas relativas</div> <div id="camada3"> Teste de camadas relativas</div> </div> </body> </htm>
  10. 10. TABLELESS Camada com clear:left; Se tivesse com float:left estaria aqui.

×