Как «поплавать» абсолютно позиционированный элемент div из его контейнера

Question

Вот сценарий (упрощенный). У меня есть div, который содержит другой div. Внешний div имеет фиксированный размер, имеет полосы прокрутки и относительное позиционирование. Внутренний div больше, чем и расположен относительно внешнего div. Я хочу, чтобы внутренний div был полностью видимым, «плавающим» над внешним div.

Я ценю это звучит искусственно, так как нет смысла ограничивать размер внешнего div таким образом. Это. Однако в реальном приложении есть другой контент внутри внешнего div, который необходимо контролировать с помощью полос прокрутки.

Как это сделать, используя только css? Обратите внимание, что внутренний div должен располагаться относительно внешнего, поэтому использование положения: фиксированное не является вариантом.

Markup:

<div id="container"> 
    <div id="popup">Popup Text</div> 
    </div> 

Css:

#container{ 
    overflow: scroll; 
    height:50px; 
    width:50px; 
    position:relative; 
} 
#popup { 
    position:absolute; 
    top:20px; 
    border:1px solid #000; 
    height:100px; 
    width:100px; 
} 

Вот Plunker

Answer 1

Вы можете добавить дополнительную обертку и установить position: relative и overflow различным оберток: HTML

<div id="base"> 
     <div id="container"> 
     <div id="popup">Popup Text</div> 
     </div> 
    </div> 

CSS

#base { 
    height:50px; 
    width:50px; 
    position:relative; 
} 
#container{ 
    overflow: scroll; 
    height:100%; 
    width:100%; 
} 
#popup { 
    position:absolute; 
    top:20px; 
    border:1px solid #000; 
    height:100px; 
    width:100px; 
} 

Fiddle: http://jsfiddle.net/UGftq/

"Секрет" в том, что the overflow property

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

containing block для абсолютно позиционированных элементов - это ближайший ассемблер с нестационарным position. Поэтому, когда элемент с overflow не расположен сам по себе, он не фиксирует абсолютно позиционированных потомков.