在無內容包裝的情況下在浮動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％