如何使用 z-index 或任何其他方法在引导轮播中定位元素？

Question

我想要达到的输出是这样的， Sample image

我尝试使用 z-index 和定位，但无法实现输出。 My work

我被以下问题困住了，无法将见证人图像一半移入背景，一半移出背景。

这是我的 HTML 代码，

<section id="testimonials">
<div class="container-fluid">
  <h2 class="medium-title">What they’ve said</h1>
  <div id="testimonial-slider" class="carousel slide" data-ride="true">
    <div class="carousel-inner">
      <div class="carousel-item active">
        <img class="testimonial-image" src="https://ibb.co/Y38pJpk" alt="Anisha Li">
        <h6>Anisha Li</h6>
        <p class="testimonial-text">“Manage has supercharged our team’s workflow. The ability to maintain
          visibility on larger milestones at all times keeps everyone motivated.”</p>
      </div>
      <div class="carousel-item">
        <img class="testimonial-image" src="images/avatar-ali.png" alt="Ali Bravo">
        <h6>Ali Bravo</h6>
        <p>“We have been able to cancel so many other subscriptions since using
          Manage. There is no more cross-channel confusion and everyone is much
          more focused.”</p>
      </div>
      <div class="carousel-item">
        <img class="testimonial-image" src="images/avatar-richard.png" alt="Richard Watts">
        <h6>Richard Watts</h6>
        <p>“Manage allows us to provide structure and process. It keeps us organized
          and focused. I can’t stop recommending them to everyone I talk to!”</p>
      </div>
      <div class="carousel-item">
        <img class="testimonial-image" src="images/avatar-shanai.png" alt="Shanai Gough">
        <h6>Shanai Gough</h6>
        <p>“Their software allows us to track, manage and collaborate on our projects
          from anywhere. It keeps the whole team in-sync without being intrusive.”</p>
      </div>
    </div>
    <a class="carousel-control-prev" href="#testimonial-slider" role="button" data-slide="prev">
      <span class="carousel-control-prev-icon"></span>
    </a>
    <a class="carousel-control-next" href="#testimonial-slider" role="button" data-slide="next">
      <span class="carousel-control-next-icon"></span>
    </a>
  </div>
  <button class="btn button-red" type="button" name="button">Get Started</button>
</div>

如何改变图片的位置？

代码链接：https://www.codeply.com/p/PbBtENblHD

只是为了方便环顾四周。

Answer 1

我找到了解决方案。 'carousel-inner' 类溢出：隐藏；财产，所以图像被隐藏了。对于所有刚接触引导程序的人，如果您遇到类似问题，请务必检查默认引导程序类的溢出属性。

Answer 2

也许试试relative positioning