布局：让组件内容按重叠背景向下推送下一个组件内容

Question

这种趋势已经存在了一段时间，但我还没有找到一个像样的解决方案。

我有两个独立的组件，它们具有不同的彩色背景，我需要将第一个组件的内容推送到第二个组件中，从而推迟其内容。

我甚至不确定它是否可行。这基本上就是它们的结构：

<div class=”component-1 blue”>
  <!-- This block of content should push down any content in a preceding component -->
  <div class=”content-1”></div>
</div>

<div class=”component-2 pink”>
  <!-- This block of content should get pushed down because of the block above it. Without the one above, it wouldn't be pushed down. -->
  <div class=”content-2”></div>
</div>

当组件1推送组件2s内容时，它应该是这样的。

这就是组件1​​不在那里推动组件2的情况。

理想情况下，解决方案的样式集不会像这样：

.component-1 + .component-2 {...} // Now push component-2 down a set amount.

因为这意味着构建的每个组件都需要添加该样式，以防它出现在组件-1之后。如果组件-1的内容发生变化，我们需要再次改变。

And here is a JSFiddle setup of it not working，如果您想尝试一下。

我尝试过使用花车，折叠边距，设置特定高度。我觉得这可能是可能的，但也可能是不可能的。

如何解决这个问题，以便它可以很好地扩展，并且可以轻松移动组件而不会破坏网站。