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高度取决于其内容。我需要在<{em> inner容器之后移动outer ; 没有它与以下内容重叠。由于我不知道inner div的高度，因此我无法在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/

Answer 2

您需要将此顶部位置设置为100％

.inner {
   position: absolute;
   top: 100%;
}

在绝对定位上重叠div

2 个答案: