在无内容包装的情况下在浮动div上堆叠div？

Question

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

下面是一个例子：https://jsfiddle.net/8nap0qm6/

虽然这是接近的，我需要的“.over”专区内的内容不换行，当它击中的是右侧格，而是充满了整个” .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

只需添加clear: both;您.over类：

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

Answer 3

由于给出的答案似乎并不满足究竟要的是什么，我决定改变一些东西，使输出接近你的期望。 Check my fiddle。

主要的改变：

1）增加了一个#parent div来的全部内容

2）绝对定位的.right DIV，相对于#parent

3）增加宽度换到.right和所有#parent的p元素，以便将两者的结果总和为100％