title: Can you tell me how to add an image and a text to my html slideshow?
body: <p>thank you so much for your help in advance. I started coding few days ago, and I have issues with my slider. My text h1 does not appear on top of my slider. I tried the Z-index but it did not work. it seems that the image appear next to my slide and not on it.  i tried different things, but it is still the same. Image appears, but next to the sliders,or the text appears under the image.      </p>
  
  <p>here is my html and my css file. Hopefully someone can help me to sort it out/ </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
      margin: 0;
      padding: 0;
      font-family: 'Roboto', sans-serif;
      font-weight: 400;
      line-height: 1.43;
      color: #484848;
      max-width: 100%;
      overflow-x: hidden;
  }
  p {
      font-size: 16px;
      margin: 0;
      padding: 0;
  }
  a:link {
      font-size: 16px;
      text-decoration: none;
  }
  a:visited {
      text-decoration: none;
  }
  h1,h2,h3,h4,h5,h6,ul,ol,li{
      margin: 0;
      padding: 0;
  }
  ul,ol{
      list-style-type;
  }
  ::selection {
      color: #fff;
      background-color: #333;
  }
  ::-moz-selection {
      color: #fff;
      background-color: #333;
  }
  
  
  /*-----------Top-Nav-------- */
  .top-nav {
   position: fixed;
   width: 100%;
   border-bottom: 1px solid #c9c9c9;
   float: left;
   display: block;
   height: 95px;
   background: #fff;
   z-index: 99999999999;
  }
  .top-nav .logo{
   width: 100%;
      float: left;
      display: block;
      height: 95px;
      border-right: 1px solid #e9e9e9;
  }
  .top-nav .logo img {
   width: 100%;
   padding: 14px 0;
   transition: all .9s;
   -webkit-filter: grayscale(0%);
  }
  .top-nav .logo a:hover img {
      -webkit-filter: grayscale(100%);
  }
  
  
  /*-----------Top-Nav-Search-------- */
  .top-nav .search-container {
      float: left;
      width:100%;
      display:block;
      padding:22px 0;
  }
  .top-nav form{
      position:relative;
      display:block;
  }
  .top-nav input[type="text"] {
   width: 100%;
   background: #fff;
   padding: 10px 12px;
   border: 1px solid #e1e1e1;
   border-right: none;
   color: #888;
   font-size: 14px;
      height:42px;
  }
  .top-nav .search-container button {
   float: right;
   padding: 8px 15px;
   background: orange;
   font-size: 17px;
   height: 42px;
   border: none;
   cursor: pointer;
   position: absolute;
   right: 0;
   color: #fff;
  }
  .top-nav .search-container button:hover {
    background: #ccc;
  }
  
  
  
  /*-----------Top-Nav-Navigation-------- */
  .navigation{
   width: auto;
   float: right;
   display: block;
  }
  .top-nav ul {
   float: right;
   padding: 35px 0;
   margin: 0;
   width: auto;
   display: block;
  }
  .top-nav ul li {
   list-style: none;
   margin: 0 34px;
   display: inline-block;
  }
  .top-nav ul li a {
   color: #777;
   font-size: 16px;
   font-weight: 400;
   text-transform: capitalize;
   letter-spacing: .5px;
      transition: all .9s;
  }
  .top-nav ul li a:hover {
   color: orange;
  }
  
  
  
  /*-----------Slideshow----------- */
  .slideshow-container {
      width: 100%;
      position: relative;
      margin: auto;
      float: left;
      display: block;
      margin-top: 94px;
  }
  .slideshow-container .slider-text{
      width:100%;
      float:left;
      display:block;
      background:#008080;
      height:510px;
  }
  .slideshow-container .slider-text h1 {
  d
    color: #fff;
   font-weight: 400;
   text-align: center;
   width: 667px;
   display: block;
   margin: 130px auto auto;
   font-size: 35px;
   font-weight: 600;
  
  }
  .slideshow-container .slider-text p {
   color: #fff;
   font-size: 17px;
   text-align: center;
   max-width: 700px;
   display: block;
   margin: 15px auto auto;
   font-weight: 400;
   letter-spacing: 0.5px;
  
  }
  .slideshow-container .prev, .slideshow-container .next {
   cursor: pointer;
   position: absolute;
   top: 50%;
   width: auto;
   padding: 11px 18px;
   margin-top: -22px;
   color: white;
   font-weight: bold;
   font-size: 18px;
   transition: 0.6s ease;
   border-radius: 48px;
   height: 48px;
   width: 48px;
   background: rgba(0,0,0, 0.4);
  }
  .slideshow-container .next{
      right: 16px;
  }
  .slideshow-container .prev{
      left: 16px;
  }
  .slideshow-container .prev:hover, .slideshow-container .next:hover {
      background-color: rgba(0,0,0,1);
      text-decoration:none;
  }
  .slider-image {
    display: flex
    }
  
  
  
  /*-----------Slideshow-dot----------- */
  .dot-area{
      width:100%;
      float:left;
      display:block;
      padding:20px 0;
      background:orange;
  }
  .dot-area .dot {
   cursor: pointer;
   height: 15px;
   width: 15px;
   margin: 0 5px;
   background-color: #f9f9f9;
   border-radius: 50%;
   display: inline-block;
   transition: background-color 0.6s ease;
  }
  .dot-area .active, .dot-area .dot:hover {
      background-color: #008080;
  }
  .fade {
      -webkit-animation-name: fade;
      -webkit-animation-duration: 1.5s;
      animation-name: fade;
      animation-duration: 1.5s;
  }
  
  @-webkit-keyframes fade {
      from {
          opacity: .4
      }
      to {
          opacity: 1
      }
  }
  @keyframes fade {
      from {
          opacity: .4
      }
      to {
          opacity: 1
      }
  }
  
  @media only screen and (max-width: 300px) {
    .prev, .next,.text {font-size: 11px}
  }
  
  
  /*-----------your-name----------- */
  .your-area{
      width:100%;
      float:left;
      display:block;
      background:#003333;
  }
  .your-area h1{
      padding:100px 0;
      font-size:20px;
      color:#fff;
      text-align: center;
      font-weight:600;
  }
  .your-area h1 span{
    color:white;
      font-size:20px;
  
  
  
  
  /*:::::::::::::::::Responsive Media Query:::::::::::::::::::*/
  
  @media only screen and (max-width:1279px){
  .top-nav ul li {
   margin: 0 20px;
  }
  }
  @media only screen and (max-width:1023px){
  
  }
  @media only screen and (max-width:979px){
  .top-nav {
   height: 70px;
  }
  .top-nav .logo {
   height: 70px;
  }
  .top-nav .search-container {
   padding: 13px 0;
  }
  .top-nav ul li a {
   font-size: 14px;
   letter-spacing: 0;
  }
  .top-nav ul {
   padding: 24px 0;
  }
  .slideshow-container {
   margin-top: 68px;
  }
  .slideshow-container .slider-text h1 {
   width: 560px;
   font-size: 27px;
  }
  .slideshow-container .slider-text {
   height: 400px;
  }
  }
  @media only screen and (max-width:899px){
  .slideshow-container .slider-text p {
   max-width: 600px;
  }
  .top-nav ul li {
   margin: 0 15px;
  }
  .your-area h1 {
   font-size: 18px;
  }
  .your-area h1 span{
   font-size: 22px;
  }
  }
  @media only screen and (max-width:799px){
  
  }
  @media only screen and (max-width:767px){
  .top-nav {
   height: auto;
  }
  .top-nav .logo {
   height: auto;
      border:0;
  }
  .top-nav .logo img {
   width: 180px;
   margin: auto;
      display:block;
  }
  .top-nav .search-container {
   padding: 0;
  }
  .navigation {
   float: none;
   margin: auto;
  }
  .top-nav ul {
   float: none;
   padding: 12px 0;
   width: auto;
   display: table;
   margin: auto;
  }
  .top-nav input[type="text"] {
   height: 38px;
  }
  .top-nav .search-container button {
   height: 38px;
  }
  .slideshow-container {
   margin-top: 170px;
  }
  .slideshow-container .slider-text h1 {
   width: 100%;
   padding: 0 90px;
  }
  .slideshow-container .slider-text p {
   max-width: 100%;
   padding: 0 90px;
  }
  }
  @media only screen and (max-width:639px){
  
  }
  @media only screen and (max-width:599px){
  .slideshow-container .slider-text h1 {
   margin: 65px auto auto;
  }
  }
  @media only screen and (max-width:479px){
  .top-nav ul li {
   margin: 0 9px;
  }
  .slideshow-container .slider-text h1 {
   padding: 0 85px;
      font-size: 16px;
  }
  .slideshow-container .slider-text p {
   padding: 0 78px;
      font-size:12px;
  }
  .slideshow-container .slider-text {
   height: 350px;
  }
  .slideshow-container .slider-text h1 {
   margin: 100px auto auto;
  }
  .your-area h1 {
   font-size: 13px;
  }
  .your-area h1 span {
   font-size: 14px;
  }
  }
  @media only screen and (max-width:359px){
  .top-nav ul li {
   margin: 0 5px;
  }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
  &lt;head&gt;
      &lt;title&gt;ElephantRoom&lt;/title&gt;
      &lt;meta charset="utf-8" /&gt;
      &lt;meta name"viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" /&gt;
      &lt;link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:400,500" /&gt;
      &lt;link rel="stylesheet" type="text/css" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" /&gt;
      &lt;link rel="stylesheet" type="text/css" href="main.css" /&gt;
      &lt;link rel="stylesheet" type="text/css" href="bootstrap.min.css" /&gt;
      &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;!-- Top-NAV HTML--&gt;
      &lt;section class="top-nav"&gt;
          &lt;div class="col-md-2 col-sm-2 col-xs-12"&gt;
              &lt;div class="logo"&gt;
                  &lt;a href="index.php"&gt;&lt;img src="logo.png" alt="ElephantRoom"/&gt;&lt;/a&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="col-md-4 col-sm-4 col-xs-12"&gt;
              &lt;div class="search-container"&gt;
                  &lt;form action="/action_page.php"&gt;
                      &lt;input type="text" placeholder="Keywords.." name="search"&gt;
                      &lt;button type="submit"&gt;Search&lt;/button&gt;
                  &lt;/form&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="col-md-6 col-sm-6 col-xs-12"&gt;
              &lt;div class="navigation"&gt;
                  &lt;ul&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Become a Host&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Help&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Sign Up&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Log In&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/section&gt;
      &lt;section class="slideshow-container"&gt;
          &lt;div class="mySlides fade"&gt;
            &lt;div class="slider-image"&gt;
              &lt;img src="image1.jpg" alt="image1"/&gt;
  
                &lt;div class="slider-text"&gt;
              &lt;h1&gt;&lt;span&gt; why book an expensive hotel when you can book a cheap apartment&lt;/span&gt;&lt;/h1&gt;
                &lt;p&gt;Lorem ipsum dolor sit amet, consecteur adipiscing
                      elit. Donec venenatis bibendum nunc ut convallis. Suspendisse in nunc unterdum quam pellentesque.&lt;/p&gt;
                    &lt;/div&gt;
                    &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  
          &lt;div class="mySlides fade"&gt;
              &lt;div class="slider-text"&gt;
                  &lt;h1&gt;We have you covered anywhere you go in Africa&lt;/h1&gt;
                  &lt;p&gt;Lorem ipsum dolor sit amet, consecteur adipiscing
                  elit. Donec venenatis bibendum nunc ut convallis. Suspendisse in nunc unterdum quam pellentesque.&lt;/p&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="mySlides fade"&gt;
            &lt;div class="slider-text"&gt;
              &lt;h1&gt; We believe in a world with no frontier&lt;/h1&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;a class="prev" onclick="plusSlides(-1)"&gt;&amp;#10094;&lt;/a&gt;
          &lt;a class="next" onclick="plusSlides(1)"&gt;&amp;#10095;&lt;/a&gt;
        &lt;/section&gt;
        &lt;section class="dot-area" style="text-align:center"&gt;
          &lt;span class="dot" onclick="currentSlide(1)"&gt;&lt;/span&gt;
          &lt;span class="dot" onclick="currentSlide(2)"&gt;&lt;/span&gt;
          &lt;span class="dot" onclick="currentSlide(3)"&gt;&lt;/span&gt;
      &lt;/section&gt;
      &lt;section class="your-area" style="text-align:center"&gt;
          &lt;h1&gt;Designed by &lt;span&gt;Sangbe Torndou Jean Marc&lt;/span&gt;&lt;/h1&gt;
      &lt;/section&gt;
  
      &lt;!-- javascript import--&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script&gt;
  var slideIndex = 1;
  showSlides(slideIndex);
  function plusSlides(n) {
    showSlides(slideIndex += n);
  }
  function currentSlide(n) {
    showSlides(slideIndex = n);
  }
  function showSlides(n) {
    var i;
    var slides = document.getElementsByClassName("mySlides");
    var dots = document.getElementsByClassName("dot");
    if (n &gt; slides.length) {slideIndex = 1}
    if (n &lt; 1) {slideIndex = slides.length}
    for (i = 0; i &lt; slides.length; i++) {
        slides[i].style.display = "none";
    }
    for (i = 0; i &lt; dots.length; i++) {
        dots[i].className = dots[i].className.replace(" active", "");
    }
    slides[slideIndex-1].style.display = "block";
    dots[slideIndex-1].className += " active";
  }
  
  &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><a href="https://i.stack.imgur.com/biLqh.png" rel="nofollow noreferrer">enter image description here</a></p>