Home > Software engineering >  When adding a css class in html, Top part of page cannot be click on that have buttons
When adding a css class in html, Top part of page cannot be click on that have buttons

Time：04-27

On my localhost, I have two buttons on top, then a drop down menu, and under the dropdown menu I have a div that must refresh. The problem is if I add the class (that is in my css file) to my main page, it is working, but then I cannot click on my buttons, I know the problem is in my css (.sp-container) file. I tested it by taking line by line out and test it. Not sure it works and what line must I change so it will not cover the buttons on top. New to css. Hope this make sense of what I need to do. Buttons can not be click on.

@import url('https://fonts.googleapis.com/css?family=Barlow');

body {
  background: #310404 url(https://i.ytimg.com/vi/wOvQAhzWCrM/maxresdefault.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  font-family: 'Barlow', sans-serif;
}
.container {
  width: 100%;
  position: relative;
  overflow: hidden;
}
a {
  text-decoration: none;
}
h1.main, p.demos {
  -webkit-animation-delay: 18s;
  -moz-animation-delay: 18s;
  -ms-animation-delay: 18s;
  animation-delay: 18s;
}
.sp-container {
 
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  z-index: 0;
  background: -webkit-radial-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3) 35%, rgba(0, 0, 0, 0.7));
  background: -moz-radial-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3) 35%, rgba(0, 0, 0, 0.7));
  background: -ms-radial-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3) 35%, rgba(0, 0, 0, 0.7));
  background: radial-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3) 35%, rgba(0, 0, 0, 0.7));
}
.sp-content {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0px;
  top: 0px;
  z-index: 1000;
}
.sp-container h2 {
  position: absolute;
  top: 50%;
  line-height: 100px;
  height: 90px;
  margin-top: -50px;
  font-size: 90px;
  width: 100%;
  text-align: center;
  color: transparent;
  -webkit-animation: blurFadeInOut 3s ease-in backwards;
  -moz-animation: blurFadeInOut 3s ease-in backwards;
  -ms-animation: blurFadeInOut 3s ease-in backwards;
  animation: blurFadeInOut 3s ease-in backwards;
}
.sp-container h2.frame-1 {
    font-size: 200px;
  -webkit-animation-delay: 0s;
  -moz-animation-delay: 0s;
  -ms-animation-delay: 0s;
  animation-delay: 0s;
}
.sp-container h2.frame-2 {
    font-size: 200px;
  -webkit-animation-delay: 3s;
  -moz-animation-delay: 3s;
  -ms-animation-delay: 3s;
  animation-delay: 3s;
}
.sp-container h2.frame-3 {
    font-size: 200px;
  -webkit-animation-delay: 6s;
  -moz-animation-delay: 6s;
  -ms-animation-delay: 6s;
  animation-delay: 6s;
}
.sp-container h2.frame-4 {
  font-size: 200px;
  -webkit-animation-delay: 9s;
  -moz-animation-delay: 9s;
  -ms-animation-delay: 9s;
  animation-delay: 9s;
}
.sp-container h2.frame-5 {
  font-size: 200px;
  -webkit-animation-delay: 12s;
  -moz-animation-delay:12s;
  -ms-animation-delay: 12s;
  animation-delay: 12s;
}
.sp-container h2.frame-6 {
  font-size: 200px;
  -webkit-animation-delay: 15s;
  -moz-animation-delay: 15s;
  -ms-animation-delay: 15s;
  animation-delay: 15s;
}

.sp-container h2.frame-7 {
  -webkit-animation: none;
  -moz-animation: none;
  -ms-animation: none;
  animation: none;
  color: transparent;
  text-shadow: 0px 0px 1px #fff;
}
.sp-container h2.frame-7 span {
  -webkit-animation: blurFadeIn 3s ease-in 18s backwards;
  -moz-animation: blurFadeIn 1s ease-in 18s backwards;
  -ms-animation: blurFadeIn 3s ease-in 18s backwards;
  animation: blurFadeIn 3s ease-in 18s backwards;
  color: transparent;
  text-shadow: 0px 0px 1px #fff;
}
.sp-container h2.frame-7 span:nth-child(2) {
  -webkit-animation-delay: 21s;
  -moz-animation-delay: 21s;
  -ms-animation-delay: 21s;
  animation-delay: 21s;
}
.sp-container h2.frame-7 span:nth-child(3) {
  -webkit-animation-delay: 24s;
  -moz-animation-delay: 24s;
  -ms-animation-delay: 24s;
  animation-delay: 24s;
}
.sp-globe {
  position: absolute;
  width: 282px;
  height: 273px;
  left: 50%;
  top: 50%;
  margin: -137px 0 0 -141px;
 /* background: transparent url(http://web-sonick.zz.mu/images/sl/globe.png) no-repeat top left;*/
  -webkit-animation: fadeInBack 3.6s linear 14s backwards;
  -moz-animation: fadeInBack 3.6s linear 14s backwards;
  -ms-animation: fadeInBack 3.6s linear 14s backwards;
  animation: fadeInBack 3.6s linear 14s backwards;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
  filter: alpha(opacity=30);
  opacity: 0.3;
  -webkit-transform: scale(5);
  -moz-transform: scale(5);
  -o-transform: scale(5);
  -ms-transform: scale(5);
  transform: scale(5);
}
.sp-circle-link {
  position: absolute;
  left: 50%;
  bottom: 100px;
  margin-left: -50px;
  text-align: center;
  line-height: 100px;
  width: 100px;
  height: 100px;
  background: #fff;
  color: #3f1616;
  font-size: 25px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  -webkit-animation: fadeInRotate 1s linear 16s backwards;
  -moz-animation: fadeInRotate 1s linear 16s backwards;
  -ms-animation: fadeInRotate 1s linear 16s backwards;
  animation: fadeInRotate 1s linear 16s backwards;
  -webkit-transform: scale(1) rotate(0deg);
  -moz-transform: scale(1) rotate(0deg);
  -o-transform: scale(1) rotate(0deg);
  -ms-transform: scale(1) rotate(0deg);
  transform: scale(1) rotate(0deg);
}
.sp-circle-link:hover {
  background: #85373b;
  color: #fff;
}
/**/

@-webkit-keyframes blurFadeInOut {
  0% {
    opacity: 0;
    text-shadow: 0px 0px 40px #fff;
    -webkit-transform: scale(1.3);
  }
  20%, 75% {
    opacity: 1;
    text-shadow: 0px 0px 1px #fff;
    -webkit-transform: scale(1);
  }
  100% {
    opacity: 0;
    text-shadow: 0px 0px 50px #fff;
    -webkit-transform: scale(0);
  }
}
@-webkit-keyframes blurFadeIn {
  0% {
    opacity: 0;
    text-shadow: 0px 0px 40px #fff;
    -webkit-transform: scale(1.3);
  }
  50% {
    opacity: 0.5;
    text-shadow: 0px 0px 10px #fff;
    -webkit-transform: scale(1.1);
  }
  100% {
    opacity: 1;
    text-shadow: 0px 0px 1px #fff;
    -webkit-transform: scale(1);
  }
}
@-webkit-keyframes fadeInBack {
  0% {
    opacity: 0;
    -webkit-transform: scale(0);
  }
  50% {
    opacity: 0.4;
    -webkit-transform: scale(2);
  }
  100% {
    opacity: 0.2;
    -webkit-transform: scale(5);
  }
}
@-webkit-keyframes fadeInRotate {
  0% {
    opacity: 0;
    -webkit-transform: scale(0) rotate(360deg);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1) rotate(0deg);
  }
}
/**/

@-moz-keyframes blurFadeInOut {
  0% {
    opacity: 0;
    text-shadow: 0px 0px 40px #fff;
    -moz-transform: scale(1.3);
  }
  20%, 75% {
    opacity: 1;
    text-shadow: 0px 0px 1px #fff;
    -moz-transform: scale(1);
  }
  100% {
    opacity: 0;
    text-shadow: 0px 0px 50px #fff;
    -moz-transform: scale(0);
  }
}
@-moz-keyframes blurFadeIn {
  0% {
    opacity: 0;
    text-shadow: 0px 0px 40px #fff;
    -moz-transform: scale(1.3);
  }
  100% {
    opacity: 1;
    text-shadow: 0px 0px 1px #fff;
    -moz-transform: scale(1);
  }
}
@-moz-keyframes fadeInBack {
  0% {
    opacity: 0;
    -moz-transform: scale(0);
  }
  50% {
    opacity: 0.4;
    -moz-transform: scale(2);
  }
  100% {
    opacity: 0.2;
    -moz-transform: scale(5);
  }
}
@-moz-keyframes fadeInRotate {
  0% {
    opacity: 0;
    -moz-transform: scale(0) rotate(360deg);
  }
  100% {
    opacity: 1;
    -moz-transform: scale(1) rotate(0deg);
  }
}
/**/

@keyframes blurFadeInOut {
  0% {
    opacity: 0;
    text-shadow: 0px 0px 40px #fff;
    transform: scale(1.3);
  }
  20%, 75% {
    opacity: 1;
    text-shadow: 0px 0px 1px #fff;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    text-shadow: 0px 0px 50px #fff;
    transform: scale(0);
  }
}
@keyframes blurFadeIn {
  0% {
    opacity: 0;
    text-shadow: 0px 0px 40px #fff;
    transform: scale(1.3);
  }
  50% {
    opacity: 0.5;
    text-shadow: 0px 0px 10px #fff;
    transform: scale(1.1);
  }
  100% {
    opacity: 1;
    text-shadow: 0px 0px 1px #fff;
    transform: scale(1);
  }
}
@keyframes fadeInBack {
  0% {
    opacity: 0;
    transform: scale(0);
  }
  50% {
    opacity: 0.4;
    transform: scale(2);
  }
  100% {
    opacity: 0.2;
    transform: scale(5);
  }
}
@keyframes fadeInRotate {
  0% {
    opacity: 0;
    transform: scale(0) rotate(360deg);
  }
  100% {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }
}
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Hoof Blad</title>
<link rel="icon" type="image/vnd.microsoft.icon"href="./images/favicon.ico" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> 
<!--<link rel="stylesheet" href="./difcol.css" type="text/css" media="screen">-->
<link rel="stylesheet" href="./move.css" type="text/css" media="screen">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script>
  $(document).ready(function() {
    setInterval(function() {
      $("#refresh").load(localhost.location.href   " refresh", function() { console.log("loaded") });
    }, 30000);
  });
  </script>

</head>
<body>

<div >
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
</div>
<td>
<center>
<img src="./images/favicon.ico" width="32" height="32"><br>
<form action="./Crypto/Index.php" target="_blank"><button type="submit">Kripto</button></form>
<form action="./Crypto/admin/Index.php" target="_blank"><button type="submit">Admin</button></form>



</td>
<link rel="stylesheet" type="text/css" href="./menu_files/swimbi.css"/>


<!-- swimbi code start -->


<div id="refresh" >
  <div >
    <div ></div>
    <h2 >1</h2>
    <h2 >2</h2>
    <h2 >3</h2>
    <h2 >4</h2>
    <h2 >5</h2>
    <h2 >6</h2>
    <h2 >
      <span>a,</span>
      <span>b,</span>
      <span>c</span>
    </h2>
  </div>
</div>


<div id="swimbi">
    <ul data-cif="2f151724">
    

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<center>
<img src="./images/favicon.ico" width="32" height="32"><br>
<form action="./Crypto/Index.php" target="_blank"><button type="submit">Kripto</button></form>
<form action="./Crypto/admin/Index.php" target="_blank"><button type="submit">Admin</button></form>



</td>
<link rel="stylesheet" type="text/css" href="./menu_files/swimbi.css"/>

CodePudding user response：

It is because your .sp-content is going above your button like a layer. Just set height:0 and position it center by managing the top and transform as below:

.sp-content {
  position: absolute;
  width: 100%;
  height: 0%;
  left: 0px;
  top: 50%;
  transform: translate(0%, -50%);

Check on full page because on small demo, it will anyway go above your button.

After the question is what are you trying into the <div ></div> because you make it grow with scale(5) creating an overflow on all body, covering button again and pretty much empty.

DEMO

@import url('https://fonts.googleapis.com/css?family=Barlow');

body {
  background: #310404 url(https://i.ytimg.com/vi/wOvQAhzWCrM/maxresdefault.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  font-family: 'Barlow', sans-serif;
}
.container {
  width: 100%;
  position: relative;
  overflow: hidden;
}
a {
  text-decoration: none;
}
h1.main, p.demos {
  -webkit-animation-delay: 18s;
  -moz-animation-delay: 18s;
  -ms-animation-delay: 18s;
  animation-delay: 18s;
}
.sp-container {
 
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  z-index: 0;
  background: -webkit-radial-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3) 35%, rgba(0, 0, 0, 0.7));
  background: -moz-radial-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3) 35%, rgba(0, 0, 0, 0.7));
  background: -ms-radial-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3) 35%, rgba(0, 0, 0, 0.7));
  background: radial-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3) 35%, rgba(0, 0, 0, 0.7));
}
.sp-content {
  position: absolute;
  width: 100%;
  height: 0%;
  left: 0px;
  top: 50%;
  transform: translate(0%, -50%);
  z-index: 1000;
}
.sp-container h2 {
  position: absolute;
  top: 50%;
  line-height: 100px;
  height: 90px;
  margin-top: -50px;
  font-size: 90px;
  width: 100%;
  text-align: center;
  color: transparent;
  -webkit-animation: blurFadeInOut 3s ease-in backwards;
  -moz-animation: blurFadeInOut 3s ease-in backwards;
  -ms-animation: blurFadeInOut 3s ease-in backwards;
  animation: blurFadeInOut 3s ease-in backwards;
}
.sp-container h2.frame-1 {
    font-size: 200px;
  -webkit-animation-delay: 0s;
  -moz-animation-delay: 0s;
  -ms-animation-delay: 0s;
  animation-delay: 0s;
}
.sp-container h2.frame-2 {
    font-size: 200px;
  -webkit-animation-delay: 3s;
  -moz-animation-delay: 3s;
  -ms-animation-delay: 3s;
  animation-delay: 3s;
}
.sp-container h2.frame-3 {
    font-size: 200px;
  -webkit-animation-delay: 6s;
  -moz-animation-delay: 6s;
  -ms-animation-delay: 6s;
  animation-delay: 6s;
}
.sp-container h2.frame-4 {
  font-size: 200px;
  -webkit-animation-delay: 9s;
  -moz-animation-delay: 9s;
  -ms-animation-delay: 9s;
  animation-delay: 9s;
}
.sp-container h2.frame-5 {
  font-size: 200px;
  -webkit-animation-delay: 12s;
  -moz-animation-delay:12s;
  -ms-animation-delay: 12s;
  animation-delay: 12s;
}
.sp-container h2.frame-6 {
  font-size: 200px;
  -webkit-animation-delay: 15s;
  -moz-animation-delay: 15s;
  -ms-animation-delay: 15s;
  animation-delay: 15s;
}

.sp-container h2.frame-7 {
  -webkit-animation: none;
  -moz-animation: none;
  -ms-animation: none;
  animation: none;
  color: transparent;
  text-shadow: 0px 0px 1px #fff;
}
.sp-container h2.frame-7 span {
  -webkit-animation: blurFadeIn 3s ease-in 18s backwards;
  -moz-animation: blurFadeIn 1s ease-in 18s backwards;
  -ms-animation: blurFadeIn 3s ease-in 18s backwards;
  animation: blurFadeIn 3s ease-in 18s backwards;
  color: transparent;
  text-shadow: 0px 0px 1px #fff;
}
.sp-container h2.frame-7 span:nth-child(2) {
  -webkit-animation-delay: 21s;
  -moz-animation-delay: 21s;
  -ms-animation-delay: 21s;
  animation-delay: 21s;
}
.sp-container h2.frame-7 span:nth-child(3) {
  -webkit-animation-delay: 24s;
  -moz-animation-delay: 24s;
  -ms-animation-delay: 24s;
  animation-delay: 24s;
}
.sp-globe {
  position: absolute;
  width: 282px;
  height: 273px;
  left: 50%;
  top: 50%;
  margin: -137px 0 0 -141px;
  background: transparent url(http://web-sonick.zz.mu/images/sl/globe.png) no-repeat top left;
  -webkit-animation: fadeInBack 3.6s linear 14s backwards;
  -moz-animation: fadeInBack 3.6s linear 14s backwards;
  -ms-animation: fadeInBack 3.6s linear 14s backwards;
  animation: fadeInBack 3.6s linear 14s backwards;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
  filter: alpha(opacity=30);
  opacity: 0.3;
  -webkit-transform: scale(5);
  -moz-transform: scale(5);
  -o-transform: scale(5);
  -ms-transform: scale(5);
  transform: scale(5);
}
.sp-circle-link {
  position: absolute;
  left: 50%;
  bottom: 100px;
  margin-left: -50px;
  text-align: center;
  line-height: 100px;
  width: 100px;
  height: 100px;
  background: #fff;
  color: #3f1616;
  font-size: 25px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  -webkit-animation: fadeInRotate 1s linear 16s backwards;
  -moz-animation: fadeInRotate 1s linear 16s backwards;
  -ms-animation: fadeInRotate 1s linear 16s backwards;
  animation: fadeInRotate 1s linear 16s backwards;
  -webkit-transform: scale(1) rotate(0deg);
  -moz-transform: scale(1) rotate(0deg);
  -o-transform: scale(1) rotate(0deg);
  -ms-transform: scale(1) rotate(0deg);
  transform: scale(1) rotate(0deg);
}
.sp-circle-link:hover {
  background: #85373b;
  color: #fff;
}
/**/

@-webkit-keyframes blurFadeInOut {
  0% {
    opacity: 0;
    text-shadow: 0px 0px 40px #fff;
    -webkit-transform: scale(1.3);
  }
  20%, 75% {
    opacity: 1;
    text-shadow: 0px 0px 1px #fff;
    -webkit-transform: scale(1);
  }
  100% {
    opacity: 0;
    text-shadow: 0px 0px 50px #fff;
    -webkit-transform: scale(0);
  }
}
@-webkit-keyframes blurFadeIn {
  0% {
    opacity: 0;
    text-shadow: 0px 0px 40px #fff;
    -webkit-transform: scale(1.3);
  }
  50% {
    opacity: 0.5;
    text-shadow: 0px 0px 10px #fff;
    -webkit-transform: scale(1.1);
  }
  100% {
    opacity: 1;
    text-shadow: 0px 0px 1px #fff;
    -webkit-transform: scale(1);
  }
}
@-webkit-keyframes fadeInBack {
  0% {
    opacity: 0;
    -webkit-transform: scale(0);
  }
  50% {
    opacity: 0.4;
    -webkit-transform: scale(2);
  }
  100% {
    opacity: 0.2;
    -webkit-transform: scale(5);
  }
}
@-webkit-keyframes fadeInRotate {
  0% {
    opacity: 0;
    -webkit-transform: scale(0) rotate(360deg);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1) rotate(0deg);
  }
}
/**/

@-moz-keyframes blurFadeInOut {
  0% {
    opacity: 0;
    text-shadow: 0px 0px 40px #fff;
    -moz-transform: scale(1.3);
  }
  20%, 75% {
    opacity: 1;
    text-shadow: 0px 0px 1px #fff;
    -moz-transform: scale(1);
  }
  100% {
    opacity: 0;
    text-shadow: 0px 0px 50px #fff;
    -moz-transform: scale(0);
  }
}
@-moz-keyframes blurFadeIn {
  0% {
    opacity: 0;
    text-shadow: 0px 0px 40px #fff;
    -moz-transform: scale(1.3);
  }
  100% {
    opacity: 1;
    text-shadow: 0px 0px 1px #fff;
    -moz-transform: scale(1);
  }
}
@-moz-keyframes fadeInBack {
  0% {
    opacity: 0;
    -moz-transform: scale(0);
  }
  50% {
    opacity: 0.4;
    -moz-transform: scale(2);
  }
  100% {
    opacity: 0.2;
    -moz-transform: scale(5);
  }
}
@-moz-keyframes fadeInRotate {
  0% {
    opacity: 0;
    -moz-transform: scale(0) rotate(360deg);
  }
  100% {
    opacity: 1;
    -moz-transform: scale(1) rotate(0deg);
  }
}
/**/

@keyframes blurFadeInOut {
  0% {
    opacity: 0;
    text-shadow: 0px 0px 40px #fff;
    transform: scale(1.3);
  }
  20%, 75% {
    opacity: 1;
    text-shadow: 0px 0px 1px #fff;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    text-shadow: 0px 0px 50px #fff;
    transform: scale(0);
  }
}
@keyframes blurFadeIn {
  0% {
    opacity: 0;
    text-shadow: 0px 0px 40px #fff;
    transform: scale(1.3);
  }
  50% {
    opacity: 0.5;
    text-shadow: 0px 0px 10px #fff;
    transform: scale(1.1);
  }
  100% {
    opacity: 1;
    text-shadow: 0px 0px 1px #fff;
    transform: scale(1);
  }
}
@keyframes fadeInBack {
  0% {
    opacity: 0;
    transform: scale(0);
  }
  50% {
    opacity: 0.4;
    transform: scale(2);
  }
  100% {
    opacity: 0.2;
    transform: scale(5);
  }
}
@keyframes fadeInRotate {
  0% {
    opacity: 0;
    transform: scale(0) rotate(360deg);
  }
  100% {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }
}
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Hoof Blad</title>
<link rel="icon" type="image/vnd.microsoft.icon"href="./images/favicon.ico" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> 
<!--<link rel="stylesheet" href="./difcol.css" type="text/css" media="screen">-->
<link rel="stylesheet" href="./move.css" type="text/css" media="screen">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script>
  $(document).ready(function() {
    setInterval(function() {
      $("#refresh").load(localhost.location.href   " refresh", function() { console.log("loaded") });
    }, 30000);
  });
  </script>

</head>
<body>

<div >
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
</div>
<td>
<center>
<img src="./images/favicon.ico" width="32" height="32"><br>
<form action="./Crypto/Index.php" target="_blank"><button type="submit">Kripto</button></form>
<form action="./Crypto/admin/Index.php" target="_blank"><button type="submit">Admin</button></form>



</td>
<link rel="stylesheet" type="text/css" href="./menu_files/swimbi.css"/>


<!-- swimbi code start -->


<div id="refresh" >
  <div >
    <div ></div>
    <h2 >1</h2>
    <h2 >2</h2>
    <h2 >3</h2>
    <h2 >4</h2>
    <h2 >5</h2>
    <h2 >6</h2>
    <h2 >
      <span>a,</span>
      <span>b,</span>
      <span>c</span>
    </h2>
  </div>
</div>


<div id="swimbi">
    <ul data-cif="2f151724">

CodePudding user response：

You could simply just add a z-index to your form elements, like this.

form {
  position: relative;
  z-index: 2000;
}

CodePudding user response：

You are putting the sp-content on top of everything else with z-index: 1000. It's basically a huge transparent box that covers your buttons. Push it to the background with z-index: -1 and bring your buttons to the front, e.g. with z-index: 1000.

Also make sure you add your css-links into the head-tag not the body-tag.

@import url('https://fonts.googleapis.com/css?family=Barlow');

body {
  background: #310404 url(https://i.ytimg.com/vi/wOvQAhzWCrM/maxresdefault.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  font-family: 'Barlow', sans-serif;
}
.container {
  width: 100%;
  position: relative;
  overflow: hidden;
}
a {
  text-decoration: none;
}
h1.main, p.demos {
  -webkit-animation-delay: 18s;
  -moz-animation-delay: 18s;
  -ms-animation-delay: 18s;
  animation-delay: 18s;
}
.sp-container {
  width: 100%;
  height: 100%;
  z-index: -1;
  background: -webkit-radial-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3) 35%, rgba(0, 0, 0, 0.7));
  background: -moz-radial-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3) 35%, rgba(0, 0, 0, 0.7));
  background: -ms-radial-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3) 35%, rgba(0, 0, 0, 0.7));
  background: radial-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3) 35%, rgba(0, 0, 0, 0.7));
}
.sp-content {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0px;
  top: 0px;
  z-index: -1;
}
.sp-container h2 {
  position: absolute;
  top: 50%;
  line-height: 100px;
  height: 90px;
  margin-top: -50px;
  font-size: 90px;
  width: 100%;
  text-align: center;
  color: transparent;
  -webkit-animation: blurFadeInOut 3s ease-in backwards;
  -moz-animation: blurFadeInOut 3s ease-in backwards;
  -ms-animation: blurFadeInOut 3s ease-in backwards;
  animation: blurFadeInOut 3s ease-in backwards;
}
.sp-container h2.frame-1 {
    font-size: 200px;
  -webkit-animation-delay: 0s;
  -moz-animation-delay: 0s;
  -ms-animation-delay: 0s;
  animation-delay: 0s;
}
.sp-container h2.frame-2 {
    font-size: 200px;
  -webkit-animation-delay: 3s;
  -moz-animation-delay: 3s;
  -ms-animation-delay: 3s;
  animation-delay: 3s;
}
.sp-container h2.frame-3 {
    font-size: 200px;
  -webkit-animation-delay: 6s;
  -moz-animation-delay: 6s;
  -ms-animation-delay: 6s;
  animation-delay: 6s;
}
.sp-container h2.frame-4 {
  font-size: 200px;
  -webkit-animation-delay: 9s;
  -moz-animation-delay: 9s;
  -ms-animation-delay: 9s;
  animation-delay: 9s;
}
.sp-container h2.frame-5 {
  font-size: 200px;
  -webkit-animation-delay: 12s;
  -moz-animation-delay:12s;
  -ms-animation-delay: 12s;
  animation-delay: 12s;
}
.sp-container h2.frame-6 {
  font-size: 200px;
  -webkit-animation-delay: 15s;
  -moz-animation-delay: 15s;
  -ms-animation-delay: 15s;
  animation-delay: 15s;
}

.sp-container h2.frame-7 {
  -webkit-animation: none;
  -moz-animation: none;
  -ms-animation: none;
  animation: none;
  color: transparent;
  text-shadow: 0px 0px 1px #fff;
}
.sp-container h2.frame-7 span {
  -webkit-animation: blurFadeIn 3s ease-in 18s backwards;
  -moz-animation: blurFadeIn 1s ease-in 18s backwards;
  -ms-animation: blurFadeIn 3s ease-in 18s backwards;
  animation: blurFadeIn 3s ease-in 18s backwards;
  color: transparent;
  text-shadow: 0px 0px 1px #fff;
}
.sp-container h2.frame-7 span:nth-child(2) {
  -webkit-animation-delay: 21s;
  -moz-animation-delay: 21s;
  -ms-animation-delay: 21s;
  animation-delay: 21s;
}
.sp-container h2.frame-7 span:nth-child(3) {
  -webkit-animation-delay: 24s;
  -moz-animation-delay: 24s;
  -ms-animation-delay: 24s;
  animation-delay: 24s;
}
.sp-globe {
  position: absolute;
  width: 282px;
  height: 273px;
  left: 50%;
  top: 50%;
  z-index: 0;
  margin: -137px 0 0 -141px;
 /* background: transparent url(http://web-sonick.zz.mu/images/sl/globe.png) no-repeat top left;*/
  -webkit-animation: fadeInBack 3.6s linear 14s backwards;
  -moz-animation: fadeInBack 3.6s linear 14s backwards;
  -ms-animation: fadeInBack 3.6s linear 14s backwards;
  animation: fadeInBack 3.6s linear 14s backwards;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
  filter: alpha(opacity=30);
  opacity: 0.3;
  -webkit-transform: scale(5);
  -moz-transform: scale(5);
  -o-transform: scale(5);
  -ms-transform: scale(5);
  transform: scale(5);
}
.sp-circle-link {
  position: absolute;
  left: 50%;
  bottom: 100px;
  margin-left: -50px;
  text-align: center;
  line-height: 100px;
  width: 100px;
  height: 100px;
  background: #fff;
  color: #3f1616;
  font-size: 25px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  -webkit-animation: fadeInRotate 1s linear 16s backwards;
  -moz-animation: fadeInRotate 1s linear 16s backwards;
  -ms-animation: fadeInRotate 1s linear 16s backwards;
  animation: fadeInRotate 1s linear 16s backwards;
  -webkit-transform: scale(1) rotate(0deg);
  -moz-transform: scale(1) rotate(0deg);
  -o-transform: scale(1) rotate(0deg);
  -ms-transform: scale(1) rotate(0deg);
  transform: scale(1) rotate(0deg);
}
.sp-circle-link:hover {
  background: #85373b;
  color: #fff;
}
/**/

@-webkit-keyframes blurFadeInOut {
  0% {
    opacity: 0;
    text-shadow: 0px 0px 40px #fff;
    -webkit-transform: scale(1.3);
  }
  20%, 75% {
    opacity: 1;
    text-shadow: 0px 0px 1px #fff;
    -webkit-transform: scale(1);
  }
  100% {
    opacity: 0;
    text-shadow: 0px 0px 50px #fff;
    -webkit-transform: scale(0);
  }
}
@-webkit-keyframes blurFadeIn {
  0% {
    opacity: 0;
    text-shadow: 0px 0px 40px #fff;
    -webkit-transform: scale(1.3);
  }
  50% {
    opacity: 0.5;
    text-shadow: 0px 0px 10px #fff;
    -webkit-transform: scale(1.1);
  }
  100% {
    opacity: 1;
    text-shadow: 0px 0px 1px #fff;
    -webkit-transform: scale(1);
  }
}
@-webkit-keyframes fadeInBack {
  0% {
    opacity: 0;
    -webkit-transform: scale(0);
  }
  50% {
    opacity: 0.4;
    -webkit-transform: scale(2);
  }
  100% {
    opacity: 0.2;
    -webkit-transform: scale(5);
  }
}
@-webkit-keyframes fadeInRotate {
  0% {
    opacity: 0;
    -webkit-transform: scale(0) rotate(360deg);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1) rotate(0deg);
  }
}
/**/

@-moz-keyframes blurFadeInOut {
  0% {
    opacity: 0;
    text-shadow: 0px 0px 40px #fff;
    -moz-transform: scale(1.3);
  }
  20%, 75% {
    opacity: 1;
    text-shadow: 0px 0px 1px #fff;
    -moz-transform: scale(1);
  }
  100% {
    opacity: 0;
    text-shadow: 0px 0px 50px #fff;
    -moz-transform: scale(0);
  }
}
@-moz-keyframes blurFadeIn {
  0% {
    opacity: 0;
    text-shadow: 0px 0px 40px #fff;
    -moz-transform: scale(1.3);
  }
  100% {
    opacity: 1;
    text-shadow: 0px 0px 1px #fff;
    -moz-transform: scale(1);
  }
}
@-moz-keyframes fadeInBack {
  0% {
    opacity: 0;
    -moz-transform: scale(0);
  }
  50% {
    opacity: 0.4;
    -moz-transform: scale(2);
  }
  100% {
    opacity: 0.2;
    -moz-transform: scale(5);
  }
}
@-moz-keyframes fadeInRotate {
  0% {
    opacity: 0;
    -moz-transform: scale(0) rotate(360deg);
  }
  100% {
    opacity: 1;
    -moz-transform: scale(1) rotate(0deg);
  }
}
/**/

@keyframes blurFadeInOut {
  0% {
    opacity: 0;
    text-shadow: 0px 0px 40px #fff;
    transform: scale(1.3);
  }
  20%, 75% {
    opacity: 1;
    text-shadow: 0px 0px 1px #fff;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    text-shadow: 0px 0px 50px #fff;
    transform: scale(0);
  }
}
@keyframes blurFadeIn {
  0% {
    opacity: 0;
    text-shadow: 0px 0px 40px #fff;
    transform: scale(1.3);
  }
  50% {
    opacity: 0.5;
    text-shadow: 0px 0px 10px #fff;
    transform: scale(1.1);
  }
  100% {
    opacity: 1;
    text-shadow: 0px 0px 1px #fff;
    transform: scale(1);
  }
}
@keyframes fadeInBack {
  0% {
    opacity: 0;
    transform: scale(0);
  }
  50% {
    opacity: 0.4;
    transform: scale(2);
  }
  100% {
    opacity: 0.2;
    transform: scale(5);
  }
}
@keyframes fadeInRotate {
  0% {
    opacity: 0;
    transform: scale(0) rotate(360deg);
  }
  100% {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }
}

.button-section{
z-index: 1000;
}
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Hoof Blad</title>
<link rel="icon" type="image/vnd.microsoft.icon"href="./images/favicon.ico" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> 
<!--<link rel="stylesheet" href="./difcol.css" type="text/css" media="screen">-->
<link rel="stylesheet" href="./move.css" type="text/css" media="screen">
<link rel="stylesheet" type="text/css" href="./menu_files/swimbi.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script>
  $(document).ready(function() {
    setInterval(function() {
      $("#refresh").load(localhost.location.href   " refresh", function() { console.log("loaded") });
    }, 30000);
  });
  </script>

</head>
<body>

<div >
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
</div>

<div >
<center>
<img src="./images/favicon.ico" width="32" height="32">
<br/>
<form action="./Crypto/Index.php" target="_blank"><button type="submit">Kripto</button></form>
<form action="./Crypto/admin/Index.php" target="_blank"><button type="submit">Admin</button></form>
</center>
</div>




<!-- swimbi code start -->


<div id="refresh" >
  <div >
    <div ></div>
    <h2 >1</h2>
    <h2 >2</h2>
    <h2 >3</h2>
    <h2 >4</h2>
    <h2 >5</h2>
    <h2 >6</h2>
    <h2 >
      <span>a,</span>
      <span>b,</span>
      <span>c</span>
    </h2>
  </div>
</div>


<div id="swimbi">
    <ul data-cif="2f151724">
    </ul>
</div>
</body>
</html>

Page link：https//www.codepudding.com/Softwareengineering/385840.html

Prev:overflow: hidden doesn't work on :after and :before pseudo elements
Next:Broken nested tree angular mat tree
  • Related

About Us:  Contact Us      Terms of Service       Privacy Policy

Copyright © 2010-2023，Powered By CodePudding