Name: position
Value:
static|relative|absolute|fixed
Lembrando que o fluxo normal dos elementos é ficar um abaixo do outro, a não ser no caso de elementos inline, que ficam um ao lado do outro.
static
Por padrão os elementos sãostatic.
Isso significa que os elementos irão seguir o fluxo normal do HTML.
relative
O position indica onde o elemento vai ser posicionado na página. Ao usar o position podemos adicionar outras propriedades como top, right, bottom, left e z-index, que vão determinar o posicionamento final do elemento.
Quando o position é relative os elementos são deslocados do seu posicionamento normal, mas sem afetar o posicionamento de outros elementos da página.
A caixa vermelha vai receber a propriedade
relative e poderá ter o seu posicionamento alterado via top, right, bottom, left e z-index.
<div class="lessonbox lessonbox1"></div>
<div class="lessonbox lessonbox2"></div>
<div class="lessonbox lessonbox3"></div>
.lessonbox {
width: 50px;
height: 50px;
margin-bottom: 8px;
}
.lessonbox1 {
background-color: red;
position: relative;
left: 100px;
top: 80px;
}
.lessonbox2 {
background-color: green;
}
.lessonbox3 {
background-color: blue;
}
absolute
Quando o position é absolute o elemento é deslocado saindo do fluxo normal.
O elemento de position absolute é posicionado em relação ao seu parent element mais próximo. Se esse elemento "pai" não existir, ele será posicionando em relação ao bloco contendo a raiz do elemento.
No valor absolute, as caixas verde e azul sobem, pois é como se a box da vermelha tivesse deixado de existir e ocupar seu espaço.
Agora, os valores de length em relação às propriedades
top right bottom left serão contados como distância da mesma, e não como proximidade(ou aproximação).
Foi necessário o seu parent element ter a position relative para que a caixa não ficasse perdida pela página.
<div class="foguetesgrid">
<div class="lessonbox lessonbox4"></div>
<div class="lessonbox lessonbox2"></div>
<div class="lessonbox lessonbox3"></div>
</div>
.foguetesgrid {
position: relative;
}
.lessonbox {
width: 50px;
height: 50px;
margin-bottom: 8px;
}
.lessonbox4 {
background-color: red;
position: absolute;
left: 1170px;
}
.lessonbox2 {
background-color: green;
}
.lessonbox3 {
background-color: blue;
}
fixed
Quando aplicado o position fixed é como se criasse um elemento flutuante que fica fixo na página, independente do scrolling feito.
Nesse caso, a caixa vermelha não ficou presa à caixa de resultado.
<div class="lessonbox lessonbox7"></div>
<div class="lessonbox lessonbox2"></div>
<div class="lessonbox lessonbox3"></div>
.lessonbox {
width: 50px;
height: 50px;
margin-bottom: 8px;
}
.lessonbox7 {
background-color: red;
position: fixed;
}
.lessonbox2 {
background-color: green;
}
.lessonbox3 {
background-color: blue;
}
z-index
É o empilhamento de elementos. Podemos usar o z-index para determinar a ordem da posição do elemento.
Quanto maior o z-index, mais "acima" vai aparecer o elemento.
Foi preciso colocar a gridbox com position relative para as caixas absolute não se perderem pela página.
O z-index define qual div vai ficar por cima da outra.
<div class="foguetesgrid">
<div class="lessonbox lessonbox8"></div>
<div class="lessonbox lessonbox5"></div>
<div class="lessonbox lessonbox6"></div>
</div>
.foguetesgrid {
position: relative;
}
.lessonbox {
width: 50px;
height: 50px;
margin-bottom: 8px;
}
.lessonbox8 {
background-color: red;
position: absolute;
left: 10px;
top: 35px;
z-index: 3;
}
.lessonbox5 {
background-color: green;
position: absolute;
left: 15px;
top: 40px;
z-index: 2;
}
.lessonbox6 {
background-color: blue;
position: absolute;
left: 20px;
top: 45px;
z-index: 1;
}
Nos permite posicionar os elementos dentro da caixa.
Controle em uma dimensão (horizontal ou vertical).
Alinhamento, direcionamento, ordenar e tamanhos.
div.parent {
display: flex;
}
Qual a direção do flex: horizontal ou vertical:
row | column
justify-content
align-items
<div class="flexboxcontainer">
<div class="flexlessonbox flexlessonblue"></div>
<div class="flexlessonbox flexlessonred"></div>
<div class="flexlessonbox flexlessongreen"></div>
</div>
.flexlessoncontainer {
display: flex;
justify-content: space-between;
align-items: center;
height: 300px;
}
.flexlessonbox {
width: 50px;
height: 50px;
}
.flexlessonblue {
background-color: blue;
}
.flexlessonred {
background-color: red;
}
.flexlessongreen {
background-color: green;
}
Aplicado no Resultado e nas próprias tabelas.
<div class="gridlessonbody">
<h3 class="gridlessontitle">Resultado</h3>
<header class="gridlessonheader">Topo</header>
<main class="gridlessonmain">Conteúdo</main>
<aside class="gridlessonaside">Infos adicionais</aside>
<footer class="gridlessonfooter">Rodapé</footer>
</div>
.gridlessonbody {
height: 1fr;
display: grid;
grid-template-areas:
"title title"
"header header"
"main aside"
"footer footer";
grid-template-rows: 30px 50px 1fr 35px;
grid-template-columns: 1fr 80px;
}
.gridlessontitle {
grid-area: title;
}
.gridlessonheader {
grid-area: header;
background-color: green;
}
.gridlessonmain {
grid-area: main;
background-color: red;
}
.gridlessonaside {
grid-area: aside;
background-color: blue;
}
.gridlessonfooter {
grid-area: footer;
background-color: gray;
}
Dentro da gridlessonheader2 foram adicionados duas novas div e seu css recebeu o valor flex, além de outros.
<div class="gridlessonbody">
<h3 class="gridlessontitle">Resultado</h3>
<header class="gridlessonheader2">Topo</header>
<div class="gridlessondiv">logo</div>
<div class="gridlessondiv">menu</div>
<main class="gridlessonmain">Conteúdo</main>
<aside class="gridlessonaside">Infos adicionais</aside>
<footer class="gridlessonfooter">Rodapé</footer>
</div>
.gridlessonbody {
height: 1fr;
display: grid;
grid-template-areas:
"title title"
"header header"
"main aside"
"footer footer";
grid-template-rows: 30px 50px 1fr 35px;
grid-template-columns: 1fr 80px;
}
.gridlessontitle {
grid-area: title;
}
.gridlessonheader2 {
grid-area: header;
background-color: green;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 5px;
}
.gridlessondiv {
background-color: unset;
}
.gridlessonmain {
grid-area: main;
background-color: red;
}
.gridlessonaside {
grid-area: aside;
background-color: blue;
}
.gridlessonfooter {
grid-area: footer;
background-color: gray;
}