在绝对定位上重叠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容器; 没有它与以下内容重叠.因为我不知道的高度innerDIV我不能只使用margin上outer.

如果要求:结构必须是这样的.它是一个自举旋转木马,我需要将旋转木马的指示器放在底部 - 指示器需要在滑块div内.

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

有任何想法吗？谢谢!

Answer 1

我能想到以下几点:

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

这将在.outer之后显示.inner.如果这不是你的意思,你可能想尝试用jquery移动元素.只是让我知道,我会尽力帮助.

编辑:

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