将轮播按钮放在图像顶部答案

【问题标题】：Put Carousel buttons on top of image将轮播按钮放在图像顶部
【发布时间】：2018-04-29 06:50:17
【问题描述】：

我有一个引导轮播和按钮，我想将它们放在图像之上，以便从图像更改为图像。无论我做什么，我似乎都无法让它在上面，它总是出现在下面。

我在最外层的 div 上尝试了相对位置，在轮播控制 div 上尝试了相对位置。有什么建议？

HTML:

<div id="carouselExampleControls" class="carousel slide"  data-interval="false" data-ride="carousel">
   <div class="carousel-inner" role="listbox">
     <div class="carousel-item active">
       <img class="mini-img" src="images/plane.png" alt="">
     </div>
     <div class="carousel-item active">
       <img class="mini-img" src="images/truck.png" alt="">
     </div>
     <div class="carousel-item active">
       <img class="mini-img" src="images/boat.png" alt="">
     </div>
     <div class="carousel-controls">
        <ul class="carousel-ul">
           <li>
             <button type="button" name="button"></button>
           </li>
           <li>
             <button type="button" name="button"></button>
           </li>
           <li>
             <button type="button" name="button"></button>
           </li>
           <li>
             <button type="button" name="button"></button>
           </li>
           <li>
             <button type="button" name="button"></button>
           </li>
        </ul>
      </div>
    </div>



CSS: 

    #carouselExampleControls {
      position: relative;
    }

    .carousel-controls {
      position: absolute;
    }

    .carousel-ul {
      position: absolute;
      list-style-type: none;
    }

【问题讨论】：

标签： html css twitter-bootstrap carousel

【解决方案1】：

我的建议是使用 jquery，因为当您想要自定义引导程序时，最好的方法是使用 jquery，例如，您可以在 div 之外创建一个按钮并调用 jquery 函数，如下所示：考虑您的按钮 ID 是 #nextButton 和 #prevButton

$('#nextButton').onClick(function(){ $('.carousel').carousel('next'); })

$('#prevButton').onClick(function(){ $('.carousel').carousel('prev'); }) 有关更多信息，您可以查看此link

【讨论】：

我可以让幻灯片与按钮一起移动，但我无法让按钮出现在图像顶部 - 它们完全出现在轮播下方。
你可以在 fiddlejs 或其他地方运行它来查看你的结果
我正在使用 boostrap，所以您将无法看到它。您如何将某物放在其他东西之上？
带有绝对位置并在其上放置一些顶部和左侧

【解决方案2】：

.carousel-ul {
      position: absolute;
      top:0;
    }

或在 html 中

<ul class="carousel-ul" style="position: absolute; top:0;">

对我有用

【讨论】：