Cómo evitar que un elemento secundario se recorte si el desbordamiento de los padres no está visible?

Question

Una vez asignado el desbordamiento con un valor que no sea visible, se recortarán todos sus elementos secundarios. Es el propósito de la propiedad de desbordamiento. Sin embargo, tengo que hacer que uno de los elementos secundarios sea 'flotado' y no recortado (como una ventana emergente), solo uno de ellos; no todo. ¿Es posible?

Tome lo siguiente como un ejemplo. ¿Hay alguna configuración de CSS que no recorta el div amarillo, mientras se recorta el elemento azul? (En la actualidad ambos están recortadas)

<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> 

El código se puede también encontrar en http://jsfiddle.net/kZBxD/

Answer 1

tratar el violín a continuación: el div amarilla está flotando fuera y div azul es por dentro como por lo que necesita.

http://jsfiddle.net/kZBxD/2/

Answer 2

¿Necesita algo como esto:

cheque este violín: 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>