如何使文字显示在滑块顶部？

Question

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.

here is my html file:

 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 > slides.length) {slideIndex = 1} if (n < 1) {slideIndex = slides.length} for (i = 0; i < slides.length; i++) { slides[i].style.display = "none"; } for (i = 0; i < dots.length; i++) { dots[i].className = dots[i].className.replace(" active", ""); } slides[slideIndex-1].style.display = "block"; dots[slideIndex-1].className += " active"; } 

 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 } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <section class="slideshow-container"> <div class="mySlides fade"> <div class="slider-image"> <img src="image1.jpg" alt="image1"/> <div class="slider-text"> <h1><span> why book an expensive hotel when you can book a cheap apartment</span></h1> <p>Lorem ipsum dolor sit amet, consecteur adipiscing elit. Donec venenatis bibendum nunc ut convallis. Suspendisse in nunc unterdum quam pellentesque.</p> </div> </div> </div> </div> 

Answer 1

I would move the <div id="slider-text"> before the <img> tag and then add the following to make it appear on top :

#slider-text {
   float: left;
   margin : auto;
   margin-top : 20%;
}

or

#slider-text {
   position: absolute;
   top: 20%;
   left: 0;
   width: 100%;
   text-align : center;
}