How to prevent a child element from clipping if the parent's overflow is not visible?

Question

Once assigning overflow with a value other than visible, all its child elements will be clipped. It is the purpose of the overflow property. However, I have to make one of the child elements to be 'floated' and not clipped (like a popup) -- just one of them; not all. Is it possible?

Take the following as an example. Is there any CSS setting that does not clip the yellow div, while clipping the blue element? (Currently they are both clipped)

<div style="position:absolute;width:100px;height:50px;overflow:hidden;border:1px solid black">
 <div style="top:30px;width:50px;height:100px;background:yellow">
 </div>
 <div style="position:absolute;left:50px;top:0;width:50px;height:100px;background:blue">
 </div>
</div>

The code can be also found at http://jsfiddle.net/kZBxD/

Answer 1

Do you need something like this:

check this fiddle : http://jsfiddle.net/kZBxD/3/

<div style="position:absolute;width:100px;height:50px;overflow:hidden;border:1px solid black">
<div style=" position:fixed;width:50px;height:100px;background:yellow"></div>