html - 在绝对定位上重叠 div

Question

关于这个话题有很多话题，但没有一个能解决我的问题。

<div class="outer"> <!-- fixed height -->
  <div class="inner">content</div> <!-- needs to be placed AFTER outer -->
</div>
<!-- the inner div should be placed here with css AND NOT overlap any of the following content -->
<div>no overlap please</div>

outer 有一个精确的高度，而 inner 高度取决于它的内容。我需要将 inner outer 容器移动； 没有它与以下内容重叠。因为我不知道 inner div 的高度，所以我不能只在 outer 上使用 margin。

在询问的情况下:结构必须是这样的。这是一个引导轮播，我需要将轮播的指示器放在底部 - 指示器需要在 slider div 内。

编辑:问题不是如何在 outer 容器底部获取 inner 容器。将其绝对定位并将其设置为底部的问题是内容与即将到来的 div 重叠。

有什么想法吗？谢谢!

Answer 1

我能想到的是:

.outer {postion:relative;}
.inner {
   position: absolute;
   top: 100%;
}

这将在 .outer 之后显示 .inner。但是，如果这不是您的意思，您可能想尝试使用 jquery 移动元素。请告诉我，我会尽力提供帮助。

编辑:

如果它必须是动态的，我想你应该使用 javascript，或者至少我不熟悉 CSS 的任何其他方式。请在 Jsfiddle 中查看 JQuery 的工作示例:https://jsfiddle.net/r6hskbn3/3/