绝对元素的边距答案

【问题标题】：Margin on absolute element绝对元素的边距
【发布时间】：2017-10-01 20:30:46
【问题描述】：

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

<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 像素。实际部分的高度为 100vh。

我正在苦苦挣扎的部分是这个。在该部分的底部，我放置了一张图片。因为我给它一个绝对位置，所以 margin-top 不会影响 testimonal-container。我已经设置了一个JSFiddle 来演示。

如您所见，底部图像位于推荐容器的顶部。有什么办法可以给它一个边际或什么来阻止这种情况的发生？

谢谢

因此，在此部分上方有一个部分，我没有包含在 Fiddle 中。我正在研究 B 部分，它的最小高度为 100vh。白色区域是 testimonial-container，它与 Section A 略微重叠，宽度为 400px，位于中间。然后在该部分的最底部有一个图像。

【问题讨论】：

absolute 元素不会互相看到，两者都处于关闭状态。除了javascript，我看不出你能做什么。 但我有一个问题：为什么这里需要绝对定位？
说实话，我愿意接受建议。我只需要在顶部获取 testimonial-container，在最底部获取图像。有没有更好的方法来实现这一点？
也许你可以添加截图来解释你需要什么？
好的，没问题，图片已添加

标签： html css twitter-bootstrap

【解决方案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; 的元素上使用margin-left: auto; margin-right: auto;

【讨论】：