html - 如何将图像放在轮播 slider 的顶部

Question

在下面的 html 代码中，我刚刚创建了一个包含四张图片的轮播。在轮播图像之前，我还有一个容器，其中包含另一个图像，我想将其固定在轮播图像之上。

    <div class="container-fluid hero-slide">
        <div class="row">


            <div id="myCarousel" class="carousel slide" data-ride="carousel">

                  <!-- Indicators -->
                  <ol class="carousel-indicators">

                  <div class="container">
                    <div class="caption">
                     <img src="acacia-house-logo.png" alt="">
                   </div>
                 </div>

                    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                    <li data-target="#myCarousel" data-slide-to="1"></li>
                    <li data-target="#myCarousel" data-slide-to="2"></li>
                    <li data-target="#myCarousel" data-slide-to="3"></li>
                  </ol>

                  <!-- Wrapper for slides -->
                  <div class="carousel-inner" >
                    <div class="item active">
                      <img src="slide2.jpg" id="item" alt="Chania">
                    </div>

                    <div class="item">
                      <img src="slider-1.png" id="item" alt="Chania">
                    </div>

                    <div class="item">
                      <img src="slider-2.png" id="item" alt="Flower">
                    </div>

                    <div class="item">
                      <img src="slider-3.png" id="item" alt="Flower">
                    </div>
                  </div>                  
            </div>
        </div>
    </div>

    .caption{
       margin:15%;
    }

我如何处理图像，以便最终可以将它们放在更靠左的位置？另一个问题是:图像现在位于轮播的中间，并且随着轮播中图像的变化而移动。

和下面网站显示的基本一样 http://www.acaciahouse.co.za/

Answer 1

试试这个:

指示器按钮内有覆盖层。将它移到轮播的顶部容器下方。

然后，您必须将覆盖图像的样式设置为 position:absolute，以便它可以覆盖幻灯片。一点定位，使用 z-index 将叠加图像放在幻灯片的顶部，添加一点不透明度(透明度)，瞧! 查看底部的 jsFiddle

.carousel-inner img{width:94%;height:200px;}
.overpic{position:absolute;top:10%;left:20%;opacity:0.5;z-index:2;}
	.overpic img{width:250px;height:300px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<div class="container-fluid hero-slide">
	<div class="overpic">
	  <div class="caption">
		 <img src="http://placeimg.com/200/200/nature" alt="">
	  </div>
	</div>
  <div class="row">
    <div id="myCarousel" class="carousel slide" data-ride="carousel">
      <!-- Indicators -->
      <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1"></li>
        <li data-target="#myCarousel" data-slide-to="2"></li>
        <li data-target="#myCarousel" data-slide-to="3"></li>
      </ol>

      <!-- Wrapper for slides -->
      <div class="carousel-inner">
        <div class="item active">
          <img src="http://placekitten.com/300/200" id="item" alt="Chania">
        </div>

        <div class="item">
          <img src="http://placekitten.com/300/200" id="item" alt="Chania">
        </div>

        <div class="item">
          <img src="http://placekitten.com/300/200" id="item" alt="Flower">
        </div>

        <div class="item">
          <img src="http://placekitten.com/300/200" id="item" alt="Flower">
        </div>
      </div>
    </div>
  </div>
</div>

由于某些原因，堆栈片段未正确运行 Bootstrap，因此请查看此 jsFiddle:

jsFiddle example

---

回答您的问题:

(1) 我如何处理图像，以便最终可以将它们放在更靠左的位置？

这是 position:absolute 和使用 left:nn% 和 top:nn% 的组合。请注意，测量值不需要以百分比为单位 - 您可以使用 px、em、vh 等。

(2) 另一个问题是:图像现在位于轮播的中间，并且随着轮播中图像的变化而移动。

position:absolute 和叠加图像 div 的正确放置解决了这个问题