html - 绝对元素的 margin

我四处搜寻，但似乎没有一种解决方案适合我。我基本上有一些基本的标记

<section id="testimonial" class="section">
  <div id="testimonial-container" class="testimonial-carousel white-back">

  </div>
  <div id="imageContainer" class="container">
    <div class="row">
      <div class="col-md-3 offset-6">
        <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSyj8ojsALtvYLKCCAxYVuTu3oxP4CmmIfNlC__LvYg4MbPIyZq" class="btmImg">
      </div>
    </div>
  </div>
</section>

现在，testimonial-container只是用于证明滑块的容器。它的min-height为400px。实际部分的高度为100vh。

我正在努力的部分是这个。在该部分的底部，我要放置图像。因为我给它一个绝对的位置，所以页边距不会影响到证词容器。我已经设置了JSFiddle进行演示。

如您所见，底部的图像位于证明容器的顶部。有什么办法可以让它留有余地或阻止这种情况的发生吗？

谢谢



因此，本小节上方没有我没有在小提琴中包含的小节。我正在研究B部分，最低高度为100vh。白色区域是推荐容器，它与A部分稍有重叠，宽度为400px，位于中间。然后在该部分的最底部有一个图像。

最佳答案

我已经复制了您的图片的相同情况：

.section-A {
  background: lightgrey;
  height: 100vh;
}

.section-B {
  position: relative;
  background: brown;
  height: 100vh;
  min-height: 800px; /* if you remove min-height <img> will overlap .testimonal-container */
} .testimonial-container {
  min-height: 400px;
  width: 70%;
  background: white;
  position: absolute;
  top: -10%; /* increase to move up */
  left: 50%;
  transform: translateX(-50%);
} img {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}

<div class="section-A">
</div>

<div class="section-B">
  <div class="testimonial-container">
  </div>
  <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSyj8ojsALtvYLKCCAxYVuTu3oxP4CmmIfNlC__LvYg4MbPIyZq" />
</div>

jsfiddle中的相同代码：https://jsfiddle.net/z69w9u4g/28/

请注意，left: 50%; transform: translateX(-50%);属性用于使元素水平居中，因为不能在具有margin-left: auto; margin-right: auto;的元素上使用position: absolute;