时间戳

首页 > 解决方案 > 将按钮放在图像 html 的顶部

javascript - 将按钮放在图像 html 的顶部

问题描述

我有这个：

    var myIndex = 0;
    carousel();
    
    function carousel() {
      var i;
      var x = document.getElementsByClassName("mySlides");
      for (i = 0; i < x.length; i++) {
        x[i].style.display = "none";  
      }
      myIndex++;
      if (myIndex > x.length) {myIndex = 1}    
      x[myIndex-1].style.display = "block";  
      setTimeout(carousel, 3000); // Change image every 2 seconds
    }
    .mySlides {
  /* max-width: 540px; */
  display: none;
  height: 100vh;
  width: 100%;
  background: repeat scroll center center / cover;
}

@media only screen and (max-width: 600px) {
  .mySlides {
   display: none;
   max-width: 540px;
   height: 50vh;
   background: repeat scroll center center / cover;
  }
}
<div id="headerr" class="home">

    <div class="w3-content w3-section">
    <img class="mySlides" src="https://images.unsplash.com/photo-1629199022827-eede3c3df471?ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwyfHx8ZW58MHx8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=900&q=60" style="width:100%">
    <img class="mySlides" src="https://images.unsplash.com/photo-1629220608817-0802c373e110?ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwzfHx8ZW58MHx8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=900&q=60" style="width:100%">

    </div>
     
  </div>

基本上，我想要的是learn more在图像上放一个按钮，就像左下角一样。我只尝试了一个标准按钮，但它就在图像的正上方。我该怎么做呢？

标签： javascripthtmlcss

解决方案

将您的图像放入单独的div并给 div 一个position: relative

现在将您的按钮放在该 div 和其 CSS 中，将其位置设置为position: absolute. 这将根据容器 div 调整您的按钮。

现在，您可以随意设置按钮的位置，例如在您的按钮类中添加以下 CSStop: 5px; right: 50px

推荐阅读