将div（菜单和标题/按钮）置于幻灯片上方

Question

I am making a website, where I want a slideshow on one on the pages. However, since the slideshow takes up the whole page, my header and menu places itselv underneath it. I tried making a div with a link where you can press "go back", to return to the index page, but it is not possible to click the link, and it is only visible when the slideshow changes from one image to another. The z-index on the slideshow is 1, and I tried making it 2, and the "button" 1, and vice versa. Still, I cannot come up with a solution. I really hope someone will be able to help with this. Thanks in advance.

I'm not posting any code, but if that is preffered, just ask!

CSS

.h1 { font-family:GeosansLight, Verdana, sans-serif; color: #fff; font-size: 40pt; }
.m1 { font-family:GeosansLight, Verdana, sans-serif; color: #fff; font-size: 18pt; }
.m2 { font-family:GeosansLight, Verdana, sans-serif; color: #fff; font-size: 15pt; }
.m3 { font-family:GeosansLight, Verdana, sans-serif; color: #fff; font-size: 30pt; }


body {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.index-bg {
    background-image: url(bild/1.png);
}

.kontakt-bg {
    background-image: url(bild/2.png);
}

.porto-bg {
    background-color: none;
}

#header {
    height: 40px;
    width: 100%;
    text-align: center;
    position: center;
}

#menu {
    height: 20px;
    width: 100%;
    text-align: center;
}

ul.menli {
    list-style-type: none;
}

ul.menli li {
    display: inline-block;
    margin: 0px 50px;
}

ul.menli li a {
    text-decoration: none;
    color: #fff;
}

ul.menli li a:hover {
    text-decoration: underline;
}

#main-left {
    height: 500px;
    width: 50%;
    float: left;
    margin-top: 100px;
    margin-left: 395px;
    background-color: none;

}

ul.mainli {
    list-style-type: none;
}

ul.mainli li{
    margin-top: 10px;
}

ul.mainli li a {
    color: #fff;
}

#main-right {
    height: 500px;
    width: 50%;
    float: right;
    margin-top: 10px;
    background-color: none;
    margin-top: 10px;
}

The button I added

#button {
    float: right;
    padding-right: 60px;
    z-index: 2;

}
a {
    color: pink;
}

Slideshow:

.slideshow {
  list-style: none;
  z-index: 1;

}



.slideshow li span {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0px;
  left: 0px;
  color: transparent;
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: none;
  opacity: 0;
  z-index: 0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-animation: imageAnimation 24s linear infinite 0s;
  -moz-animation: imageAnimation 24s linear infinite 0s;
  animation: imageAnimation 24s linear infinite 0s;

}

.no-cssanimations .slideshow li span { 
    opacity: 1; 
}

@-webkit-keyframes

imageAnimation { 
    0% 
    {
        opacity: 0;
        -webkit-animation-timing-function: ease-in;
    }
    12.5% {
        opacity: 1;
        -webkit-animation-timing-function: ease-out;
    }
    25% {
    opacity: 1;
    }
    37.5% {
    opacity: 0;
    }
    100% {
    opacity: 0;
    }
}

@-moz-keyframes
    imageAnimation { 
    0% {
        opacity: 0;
        -moz-animation-timing-function: ease-in;
    }
        12.5% {
        opacity: 1;
        -moz-animation-timing-function: ease-out;
    }
        25% {
        opacity: 1;
    }
        37.5% {
        opacity: 0;
    }
        100% {
        opacity: 0;
    }
}
@keyframes
imageAnimation { 
    0% {
        opacity: 0;
        -webkit-animation-timing-function: ease-in;
        -moz-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }
        12.5% {
        opacity: 1;
        -webkit-animation-timing-function: ease-out;
        -moz-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }
        25% {
        opacity: 1;
    }
        37.5% {
        opacity: 0;
    }
        100% {
        opacity: 0;
    }
}

@-webkit-keyframes
titleAnimation { 
    0% {
        opacity: 0;
    }
        12.5% {
        opacity: 1;
    }
        25% {
        opacity: 1;
    }
        37.5% {
        opacity: 0;
    }
        100% {
        opacity: 0;
    }
}
@-moz-keyframes
titleAnimation { 
    0% {
        opacity: 0;
    }
        12.5% {
        opacity: 1;
    }   
        25% {
        opacity: 1;
    }   
        37.5% {
        opacity: 0;
    }
        100% {
        opacity: 0;
    }
} 

@keyframes

titleAnimation { 
    0% {
        opacity: 0;
    }
        12.5% {
        opacity: 1;
    }
        25% {
        opacity: 1;
    }   
        37.5% {
        opacity: 0;
    }
        100% {
        opacity: 0;
    }
}


.slideshow li:nth-child(1) span { background-image: url(bild/1.png); }

.slideshow li:nth-child(2) span {
  background-image: url(bild/2.png);
  -webkit-animation-delay: 6s;
  -moz-animation-delay: 6s;
  animation-delay: 6s;
}

.slideshow li:nth-child(3) span {
  background-image: url(bild/3.png);
  -webkit-animation-delay: 12s;
  -moz-animation-delay: 12s;
  animation-delay: 12s;
}

.slideshow li:nth-child(4) span {
  background-image: url(bild/1.png);
  -webkit-animation-delay: 18s;
  -moz-animation-delay: 18s;
  animation-delay: 18s;
}

HTML on the page in question

<!DOCTYPE html>
<html class="porto-bg">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<script>

</script>
</head>

<body>

<div id="header" class="h1">
MUA: CAROLINE MIKKELSEN</div>

<div id="menu" class="m1">
<ul class="menli">
<li><a href="index.html"> forside </a></li>
<li><a href="porto.html"> portofølje  </a></li>
<li><a href="samarbeid.html"> samarbeidspartnere  </a></li>
<li><a href="kontakt.html"> kontakt  </a></li>
</ul>
</div>

<ul class="slideshow">

  <li> <span>Slide one</span> </li>

  <li> <span>Slide two</span> </li>

  <li> <span>Slide three</span> </li>

  <li> <span>Slide four</span> </li>

</ul>

<div id="button" class="m3">
<a href="index.html"> GO BACK </a> 
</div> 

</body>

</html> 

Answer 1

The carousel images might also been given z-index individually. Please make your z-index = number of slides + 2 (container and one extra) and try

Answer 2

I think a correct use of positioning would solve your problem ...

whenever I have a problem of this sort I always refer to W3Schools website as they have a very diverse set of info on everything ...

W3Schools - CSS position Property

furthermore I find it easier to wrap elements like lists in a container div

<div class="container">

 <ul class="slideshow">
  <li> <span>Slide one</span> </li>
  <li> <span>Slide two</span> </li>
  <li> <span>Slide three</span> </li>
  <li> <span>Slide four</span> </li>
 </ul>

</div>

just so they will be easier to manipulate on the larger scheme of things ....

I also noticed that you repeat some code that you can group to save a few lines like so :

.m1 .m2 .m3{
  font-family: GeosansLight, Verdana, sans-serif;
  color: #fff;
}