Eu gostaria de poder girar uma div, e para isso usei 'transform', no CSS, porém eu gostaria que uma div ficasse sobreposta. Eis o código:
#divgirada {
width: 500px;
height: 500px;
background: red;
transition-duration: 1s;
}
#divgirada:hover {
transform: rotate(10deg);
}
#divparada {
width: 500px;
height: 500px;
background: blue;
margin-top: -200px;
margin-left: 200px;
}
<html>
<head>
<title>Teste de rotação</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div id="divgirada"></div>
<div id="divparada"></div>
</body>
</html>
O problema é que, apesar da div azul ficar em cima, no momento em que a div vermelha gira ela sobrepõe a azul. Como girar a div vermelha mas fazer com que a div azul continue em cima?