'Why does a position:fixed loading spinner unable me to click on the page

Hello boys here the problem, as soon as i putted the fixed position on my loading spinner then my cursor on the div is not a pointer anymore i'm reading a lot about it but i still cant get why may anyone help ? :S

https://codepen.io/betrouni/pen/GRypzwP

 <div class="loader"><div class="spinner"></div></div>
    
    <footer>
            <p>Sentence one </p>
          <p >Sentence two </p>
        </footer>



 footer {
  background-color: #444941;
  color: white;
  padding-bottom: 40px;
  cursor:pointer;
  p {
    font-family: "Shrikhand";
    font-size: 150%;
    font-weight: 100;
    padding-top: 30px;
    padding-left: 20px;
    margin-top: 0px;
    margin-bottom: 25px;
  }
}
.loader {
  background-color: white;
  height: 100vh;
  position: fixed;
  top:0;
  bottom:0;
  right:0;
  left: 0;

  display: flex;
  animation: disappearing 100ms ease-out 1s forwards;
}

.spinner {
  height: 150px;
  width: 150px;
  border: 15px solid lightgrey;
  border-top-color: #ff79da;
  border-radius: 50%;
  margin: auto;
  animation: spinning 0.9s ease-out 4 forwards;
}




@keyframes disappearing {
  0% {
    opacity: 1;

  }

  100% {
    opacity: 0;
  }
}

@keyframes spinning {
  0% {
    transform: rotate(0deg);
    border: 15px solid lightgrey;
    border-top-color: #ff79da;
  }
  50% {
    border-top-color: #9356dc;
  }
  100% {
    transform: rotate(360deg);
    border-top-color: #ff79da;
    z-index: 0;
  }
}

If u comment the : <div class="loader"><div class="spinner"></div></div>

the cursor on the div becomes a pointer, i need to have that pointer but even if the loading page works, I dont think that comes from the Z-index cus even when it's 0 the div isnt clickable

CSS ONLY

tysm

csspositionloading


Solution 1:[1]

By adding z-index: -1; in 100% of disappearing keyframe will resolve the issue.

footer {
  background-color: #444941;
  color: white;
  padding-bottom: 40px;
  cursor: pointer;
  z-index: 9999;
}
footer p {
  font-family: "Shrikhand";
  font-size: 150%;
  font-weight: 100;
  padding-top: 30px;
  padding-left: 20px;
  margin-top: 0px;
  margin-bottom: 25px;
}

.loader {
  background-color: white;
  height: 100vh;
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  display: flex;
  animation: disappearing 100ms ease-out 1s forwards;
}

.spinner {
  height: 150px;
  width: 150px;
  border: 15px solid lightgrey;
  border-top-color: #ff79da;
  border-radius: 50%;
  margin: auto;
  animation: spinning 0.9s ease-out 4 forwards;
}

@keyframes disappearing {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    z-index: -1;
  }
}
@keyframes spinning {
  0% {
    transform: rotate(0deg);
    border: 15px solid lightgrey;
    border-top-color: #ff79da;
  }
  50% {
    border-top-color: #9356dc;
  }
  100% {
    transform: rotate(360deg);
    border-top-color: #ff79da;
    z-index: 0;
  }
}
<div class="loader"><div class="spinner"></div></div>

<footer>
        <p>Sentence one </p>
      <p >Sentence two </p>
    </footer>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Nikhil Parmar

Related Questions