html – Problems with overlapping rotated elements

Question:

I would like to be able to rotate a div, and for that I used 'transform', in CSS, but I would like a div to overlap. Here's the code:

#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>

The problem is that even though the blue div is on top, the moment the red div rotates it overlaps the blue one. How to rotate the red div but make the blue div stay on top?

Answer:

Like the one I've put below, I just added a position:relative on the 2 divs and put z-index on both, putting the blue one with the highest value to be on top

#divgirada {
  position:relative;
  z-index:998;
  width: 500px;
  height: 500px;
  background: red;
  transition-duration: 1s;
}

#divgirada:hover {
  transform: rotate(10deg);
}

#divparada {
  position:relative;
  z-index:999;
  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>
Scroll to Top
AllEscort