关于绝对元素的保证金

Question

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

<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。

我正在努力的部分就是这个。在该部分的底部，我正在放置一个图像。因为我给它一个绝对的位置，所以margin-top不会影响见证容器。我已经设置了JSFiddle来演示。

如您所见，底部图像位于推荐容器的顶部。有没有办法给它留一个余地或什么东西来阻止这种情况发生？

由于

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

Answer 1

我复制了你的形象的相同情况：

.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;