绝对元素的裕度

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为400 of。实际剖面的高度为100 of。

我在挣扎的部分就是这个。在这一节的底部，我要放置一个图像。因为我给它一个绝对的位置，一个边缘顶部将不会影响的估计-容器。我已经设置了一个JSFiddle来演示。

正如你所看到的，下面的图像位于容器的顶部。有没有办法给它一个保证金或什么东西来阻止这种情况的发生？

谢谢

​

​

所以在这个部分上面有一个章节，我没有包括在Fiddle中。我正在B区工作，它的最小高度是100 of。白色区域是容器，与A部分略有重叠，宽度为400 in，位于中间。然后，有一个图像位于最底部的部分。

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%);属性用于元素的水平对中，因为不能对具有position: absolute;的元素使用position: absolute;