在不包含内容的情况下将div叠加在浮动div上？

Question

我有一个元素（div）浮动到内容的右边，并且在内容下面（可以在高度上变化）我有另一个div，我想在浮动的右div上方堆叠，但保持在内容之下

以下是一个示例：https://jsfiddle.net/8nap0qm6/

虽然这很接近，但我需要“.over”div中的内容在它击中右手div时不会换行，而是填满整个“.over”div，同时仍然重叠右手div 。

在“.over”div上加上“clear：both / left”会将div推到右侧div下方，而不是重叠它。

我知道我可以绝对定位过分：

.over {
    position: absolute;
    top: 200px; // or xx%
    left: 0px;
    z-index: 5;
}

但是我需要它由内容垂直控制，所以我不能在它上面设置一个“顶部”。

有没有办法实现这个目标？ （将蓝色框中的白色文字设为蓝色框的全宽。）如果需要，我愿意使用完全不同的代码。

Answer 1

您只需设置position: absolute;

即可

.over {
position: absolute;
z-index: 5;
}

JSFiddle

Answer 2

由于给定的答案似乎并不能完全满足预期，我决定改变一些东西，使输出更接近你的预期。 Check my fiddle

主要变化：

1）添加了#parent div来包装整个内容

2）相对于.right

绝对定位#parent div

3）为.right和所有#parent的{​​{1}}元素添加了宽度，以便将两者结合为100％

Answer 3

只需将clear: both;添加到.over班级：

.over{
    clear: both;
    /* your properties */
}