Problems with overlapping rotated elements

Asked

Viewed 79 times

3

I wish I could rotate a div, and for that I used 'Transform', in CSS, but I would like a div to be superimposed. 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 although the blue div is on top, the moment the red div rotates it overlaps the blue. How to spin the red div but make the blue div continue on top?

html css

1 answer

1


Like what I put down, just add one position:relative in the 2 Ivs and z-index in both, putting the blue with the higher 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>

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.