Tutorials
https://vvcestudio.com.br/en/tutorial/css/css07/menu
CSS 7 - Posicionamento de elementos, bordas e z-index
Como arredondar bordas de um elemento html? O border-radius permite crie borddas, passando o valor raio.
Como trazer uma div para frente? Use o z-index para posicionar uma div a frente ou atras das outras?
A baixo o exemplo de 2 divs com posição z-index.
A DIV1 esta mais a frente porque o z-index tem um numero maior.
Texto Div1
Texto Div2
HTML code:
x
<div id="div1">Texto Div1</div>
<div id="div2">Texto Div2</div>
<div id="div2">Texto Div2</div>
CSS code:
x
#div1{
position: absolute;
top:200px;
left: 200px;
width: 300px;
height: 180px;
background-color: brown;
opacity: 0.6;
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
box-shadow: 2px 2px 2px #000000;
z-index: 2;
}
#div2{
position: relative;
width: 300px;
height: 180px;
background-color:green;
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
box-shadow: 4px 4px 4px #000000;
z-index: 1;
}
position: absolute;
top:200px;
left: 200px;
width: 300px;
height: 180px;
background-color: brown;
opacity: 0.6;
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
box-shadow: 2px 2px 2px #000000;
z-index: 2;
}
#div2{
position: relative;
width: 300px;
height: 180px;
background-color:green;
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
box-shadow: 4px 4px 4px #000000;
z-index: 1;
}
Visit other channels :
