как заставить мой текст появляться сверху моего слайдера? - PullRequest
Новая
       12

как заставить мой текст появляться сверху моего слайдера?

0 голосов
/ 09 ноября 2018

У меня проблемы с моим слайдером. Мой текст h1 не отображается поверх моего слайдера. Я попробовал z-index, но это не сработало. кажется, что изображение появляется рядом с моим слайдом, а не на нем. enter image description here

вот мой HTML-файл: 

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>

1 Ответ

0 голосов
/ 09 ноября 2018

Я бы переместил <div id="slider-text"> перед тегом <img>, а затем добавил бы следующее, чтобы он появился сверху: 

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

или 

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