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

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

В качестве примера возьмем следующее. Есть ли какой-либо параметр 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/

Ответ 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>

Ответ 2

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

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