时间戳

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

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

问题描述

我想要实现的输出是这样的， 示例图像

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

我被以下内容困住了，无法将见证人图像一半移动到背景内部，一半移动到背景之外。

这是我的 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.”&lt;/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.”&lt;/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!”&lt;/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.”&lt;/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>

如何改变图像的位置？

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

只是为了方便环顾四周。

标签： htmlcsstwitter-bootstrapbootstrap-4position

解决方案

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

推荐阅读