Создайте позицию: абсолютная прокрутка div обычно внутри другого прокручиваемого div

Question

У меня есть фиксированная высота прокрутки <div id="overlay">, расположенная над всеми элементами страницы с помощью position:fixed.В div у меня есть элементы выше фиксированной высоты, поэтому появляется полоса прокрутки.У меня также есть всплывающая подсказка, в которой я хочу остаться с абзацем, даже если он прокручен.

Я хочу, чтобы это произошло здесь, но, к сожалению, ни одно из моих решений не работает должным образом:

1. Я добавляю position:absolute к всплывающей подсказке и position:relative к #overlay (родительской подсказке): http://jsfiddle.net/4qTke/

   Подсказка прокручивается, как и ожидалось, но она не видна за пределами #overlay,

2. Я только добавляю position:absolute к всплывающей подсказке: http://jsfiddle.net/Yp6Wf/

   Подсказка отображается за пределами родительского элемента #overlay, но не перемещается, когда divпрокручивается.

Я хочу, чтобы подсказка всегда была видимой И , чтобы она могла перемещаться при прокрутке.

Answer 1

То, что вы хотите, невозможно, используя только CSS и HTML.

Основная проблема, с которой вы столкнулись, заключается в том, что вы установили overflow: scroll для контейнера, к которому относится #tooltip.Поскольку это свойство переполнения не позволяет любому контенту появляться за пределами его краев, когда вы позиционируете #tooltip «снаружи» div, оно будет скрыто и отображается только при прокрутке до.

Причина, по которой он был виденв вашем втором сценарии, потому что без установки position:relative ваш #tooltip был относительно страницы, а не контейнера.Это означало, что свойство контейнера overflow:scroll не было затронуто.

Answer 2

HTML:

<div id="overlay">

    <div class="elemRel">

        <div class="elemAbs">

            <!-- Your Code -->

        </div>

    </div>

</div>

CSS:

#overlay { position:fixed; }
.elemRel { position:relative; }
.elemAbs { position:absolute; }

Answer 3

Может быть, это альтернатива для вас? См. демонстрационная скрипка .