css - 将按钮定位在 Bootstrap 轮播中的链接上

我想在每张幻灯片上添加一个位于 carousel-control 链接上方的右上角按钮。

我该怎么做？

下面你可以看到按钮在carousel-control

下面

.myButton {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 999; /*not working */
}

.carousel {
  height: 400px;
}

.carousel-inner {
   width: 100%; /*this must stay */
   height: 100%; /*this must stay */
   /* z-index: 1; //this make the carousel-control unclickable */
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>


<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active text-center">
      <button type="button" class="myButton">Btn</button>
      Slide 1
    </div>
    <div class="item text-center">
      <button type="button" class="myButton">Btn</button>
      Slide 2
    </div>
    <div class="item text-center">
      <button type="button" class="myButton">Btn</button>
      Slide 3
    </div>
  </div>

  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

最佳答案

将类为“myButton”的按钮标签放在类为“item active text-center”的div 标签之前。我在下面的代码中为 Btn1 更改了它。

 <!DOCTYPE html>
    <html>
    <head>
      <title></title>
    </head>

    <style type="text/css">
      .myButton {
        position: absolute;
        top: 0;
        right: 0;
        z-index: 999; /*not working */
    }

    .carousel {
      height: 400px;
    }

.carousel-inner {
   width: 100%; /*this must stay */
   height: 100%; /*this must stay */
   /* z-index: 1; //this make the carousel-control unclickable */
}
    </style>
    <body>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>


    <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
      <!-- Indicators -->
      <ol class="carousel-indicators">
        <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
        <li data-target="#carousel-example-generic" data-slide-to="1"></li>
        <li data-target="#carousel-example-generic" data-slide-to="2"></li>
      </ol>

      <!-- Wrapper for slides -->
      <div class="carousel-inner" role="listbox">
        <button type="button" class="myButton">Btn1</button>
        <div class="item active text-center">      
          Slide 1
        </div>
        <!-- <button type="button" class="myButton">Btn2</button> -->
        <div class="item text-center">
          <!-- <button type="button" class="myButton">Btn2</button> -->
          Slide 2
        </div>
        <!-- <button type="button" class="myButton">Btn3</button> -->
        <div class="item text-center">
          <!-- <button type="button" class="myButton">Btn3</button> -->
          Slide 3
        </div>
      </div>

      <!-- Controls -->
      <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
      </a>
      <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
      </a>
    </div>

    </body>
    </html>

关于css - 将按钮定位在 Bootstrap 轮播中的链接上，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53657229/

css - 将按钮定位在 Bootstrap 轮播中的链接上

上一篇：css - svg 中的响应图像

下一篇：html - 如何修复无效的图片链接？