如何将幻灯片选择器点放在图像顶部？

Question

通过 w3 学校，我能够制作此幻灯片并添加它并使其在我的网页上运行。除了按钮的位置外，一切都运行顺利。目前它们在自己的 div 中，但我希望它们位于底部中心的图像顶部。

到目前为止，我已经尝试删除 div 并调整位置，但这对我不起作用。

下面是代码，这里是一个Codepen。实际的幻灯片在示例中可能不起作用（现在只是在输入代码段时发现这一点），但我只是在寻找如何定位<span class="dot"图像顶部的 3 个点

提前致谢！

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 */

#slideshow {

  height: 400px;

  width: 100%;

  position: relative;

  margin: auto;

  overflow: hidden;

}

#slideshow img {

  height: 400px;

  width: 100%;

}

/* Next & previous buttons */

.prev, .next {

  cursor: pointer;

  position: absolute;

  top: 50%;

  width: auto;

  padding: 16px;

  margin-top: -22px;

  color: white;

  font-weight: bold;

  font-size: 18px;

  transition: 0.4s ease;

  border-radius: 0 3px 3px 0;

  user-select: none;

}

/* Position the "next button" to the right */

.next {

  right: 0;

  border-radius: 3px 0 0 3px;

}

/* On hover, add a black background color with a little bit see-through */

.prev:hover, .next:hover {

  background-color: rgba(0,0,0,0.8);

}

/* The dots/bullets/indicators */

.dot {

  cursor: pointer;

  height: 15px;

  width: 15px;

  margin: 0 2px;

  background-color: #bbb;

  border-radius: 50%;

  display: inline-block;

  transition: background-color 0.6s ease;

}

.active, .dot:hover {

  background-color: #717171;

}

.fade {

  -webkit-animation-name: fade;

  -webkit-animation-duration: 1.5s;

  animation-name: fade;

  animation-duration: 1.5s;

}

Answer 1

将点放在#slideshow div 的底部，并带有一个类名为“dots”的父 div。然后将此css添加到“点”div。.dots {&nbsp; width: 100px;&nbsp; position: absolute;&nbsp; bottom: 0;&nbsp; left: 50%;&nbsp; margin-left: -50px;}