Técnicas e processos - HTML / CSS - aula 7
10
Técnicas e processos de produção Profº Ritielle Souza Aula 07
-
Upload
ritielle-de-souza -
Category
Design
-
view
85 -
download
0
description
Curso design - Anhanguera Unidade Brigadeiro
Transcript of Técnicas e processos - HTML / CSS - aula 7
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 absolute
O posicionamento das camadas relativas se faz por encaixe.
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;
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.
Container ou fundo
Camada01
Camada02
CAMADAS RELATIVAS
#camada1{
position:relative;
width:150px;
height:200px;
background-color:red;
text-align:center;
color:#ffffff;
border:3px solid yellow;
float:left;
}
CAMADAS RELATIVAS
#camada2{
position:relative;
width:150px;
height:200px;
background-color:yellow;
text-align:center;
color:#666666;
border:3px solid red;
float:left;
}
CAMADAS RELATIVAS
#camada3{
position:relative;
width:150px;
height:200px;
background-color:orange;
text-align:center;
color:#ffffff;
border:3px solid blue;
clear:left;
}
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>
TABLELESS
<div id="camada2"> Teste de camadas relativas</div>
<div id="camada3"> Teste de camadas relativas</div>
</div>
</body>
</htm>
TABLELESS
Camada com clear:left;
Se tivesse com float:left estaria aqui.
