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

У меня есть фиксированная высота с возможностью прокрутки <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.

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


scroll css css-position positioning
person Pioul    schedule 10.08.2011    source источник
comment
очень хороший рерайт, спасибо!   -  person Pioul    schedule 11.08.2011
comment
Пожалуйста. Рад, что помог. Есть только одна всплывающая подсказка; и где он должен появиться, то есть под абзацем или сбоку от него, внутри или снаружи контейнера?   -  person tw16    schedule 11.08.2011

Ответы (3)


arrow_upward
2
arrow_downward

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

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

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

person tw16    schedule 11.08.2011
comment
Вы правы, я не думал об этом таким образом. Думаю, мне придется поместить абзац с всплывающей подсказкой вверху прокручиваемой области, чтобы он не слишком часто переполнялся. - person Pioul; 11.08.2011

arrow_upward
1
arrow_downward

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; }
person Seth    schedule 11.08.2011
comment
спасибо за ваш ответ, но это то, что я сделал в своем 1-м пункте, и это не то, что я хочу:/ - person Pioul; 11.08.2011

arrow_upward
0
arrow_downward

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

person NGLN    schedule 11.08.2011
comment
Это сделало бы его для регулярного использования, но не в моем случае, мне действительно нужно, чтобы всплывающая подсказка оставалась под абзацем и следовала за ней при прокрутке. Я думаю, @tw16 прав, и это невозможно сделать, по крайней мере, без использования JavaScript. - person Pioul; 11.08.2011