Как предотвратить ограничение дочернего элемента, если переполнение родительского элемента не видно?

Question

После назначения переполнения значением, отличным от видимого, все его дочерние элементы будут обрезаны.Это цель свойства переполнения.Однако я должен сделать один из дочерних элементов «плавающим», а не обрезанным (как всплывающее окно) - только один из них;не все.Возможно ли это?

В качестве примера рассмотрим следующее.Существуют ли какие-либо настройки CSS, которые не обрезают желтый div при обрезании синего элемента?(В настоящее время они оба обрезаны)

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

Код также можно найти по адресу http://jsfiddle.net/kZBxD/

Answer 1

Вам нужно что-то вроде этого:

проверьте эту скрипку: 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>

Answer 2

попробуйте приведенную ниже скрипку: желтый div находится снаружи, а синий - внутри, как вам нужно.

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