Html Question posted in
Some basic documentation can be found here.

Html – The z-index is not working when the div is animated

Even after applying z-index -1 on the ::after the stacking context of the ::after is not the way I want it to be and I have watched and researched a lot and still am unable to solve this issue I have read a lot of answers here but still no help

body {
  height: 97vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.container {
  background-color: red;
  width: 400px;
  height: 400px;
  animation-name: spinner;
  animation-duration: 2s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  position: relative;
  border-radius: 50%;
}

.container::after {
  content: "";
  background-color: blue;
  height: 220px;
  width: 220px;
  border-radius: 200px 0 0 0;
  transform: rotate(6deg);
  position: absolute;
  top: -30px;
  z-index: -1;
}

@keyframes spinner {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
<div class="container">
</div>
Tags:

2

Answers


  1. 0

    To get the blue shape spinning behind the red container, you could add a wrapper around your container, use the ::after on the wrapper and set it to be behind the container with z-index.

    body {
  height: 97vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.wrapper {
  animation-name: spinner;
  animation-duration: 2s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  position: relative;
}

.container {
  background-color: red;
  width: 400px;
  height: 400px;
  position: relative;
  border-radius: 50%;
}

.wrapper::after {
  content: "";
  background-color: blue;
  height: 220px;
  width: 220px;
  border-radius: 200px 0 0 0;
  transform: rotate(6deg);
  position: absolute;
  top: -30px;
  z-index: -1;
}

@keyframes spinner {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
    <body>
  <div class="wrapper">
    <div class="container"></div>
  </div>
</body>
    Login or Signup to reply.
  2. 0

    You might achieve the same easier just using border :

    body {
  height: 97vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.container {
  background: red padding-box;
  width: 40vmin;
  height: 40vmin;
  border-radius: 50%;
  border: solid 4vmin;
  border-color:#00f #0000 #0000;
  animation: spinner 2s linear infinite;
}


@keyframes spinner {
  100% {
    transform: rotate(360deg);
  }
}
    <div class="container">
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search