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>
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;
}