CSS: дочерний div перекрывающийся родитель

Question

У меня есть что-то смутное, похожее на следующее:

<div id="body">
  surrounding text 
  <div id="pane" style="overflow: auto; height: 500px; width: 500px;">
    lots and lots of text here
    <span id="some_bit">tooltip appears below-right of here</span>
  </div>
  more surrounding text (should be overlapped by tooltip)
</div>

и

<div id="tooltip" style="width: 100px; height: 100px;">Whee</div>

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

Это НЕ должно a) расширять панель, так что вам нужно прокрутить вниз, чтобы увидеть, что всплывающая подсказка (как в http://saizai.com/css_overlap.png), или b) обрезана, так что вы не можете увидеть всю подсказку.

Я вставляю это с помощью JS, так что я могу добавить обертку position:relative div или подобное, если необходимо, вычислить смещения и сделать ее position:absolute и т. Д. Я бы предпочел не предполагать ничего о * 1017 панели * свойство - всплывающая подсказка должна быть вставляемой с минимальными предположениями о возможном макете страницы. (Это только один пример.)

Это я пишу для библиотеки прототипов, которая будет с открытым исходным кодом.

ETA: http://jsfiddle.net/vCb2y/5/ ведет себя визуально так, как я хочу (если вы продолжаете повторно парить текст триггера), но мне потребуется обновить положение всплывающей подсказки для всех изменений DOM и прокрутка поведения. Я бы предпочел, чтобы всплывающая подсказка располагалась с чистым CSS / HTML, чтобы она имела такое же визуальное поведение (то есть перекрывает все другие элементы), но остается на своей позиции относительно цели при изменениях DOM, прокрутке и т. Д. .

ETA 2: http://tjkdesign.com/articles/z-index/teach_yourself_how_elements_stack.asp (сохраните значения по умолчанию, за исключением того, что установите cyan div 'a' в положение: относительное; представьте, что A - это панель, а подсказка - "a"), похоже, ведет себя более точно так, как я хочу, но я не смог заставить его работать в другом месте. Обратите внимание, что если вы сделаете 'A' overflow: auto, это нарушит перекрывающееся поведение 'a'.

Answer 1

Я не могу придумать для этого чисто HTML / CSS-решение.

Здесь проблема в объявлении переполнения.Если всплывающая подсказка находится в #pane:

1. , вы устанавливаете контекст позиционирования в #pane, тогда всплывающая подсказка отображается рядом с #some_bit (независимо от прокрутки и т. Д.), Но становитсявыкл.

2. вы не устанавливаете контекст позиционирования, затем всплывающая подсказка not обрезана, но она не имеет ни малейшего понятия, где находится #some_bit на странице.

Боюсь, вам понадобится JS, чтобы отслеживать, где находится #some_bit на странице, и соответственно размещать подсказку.Вам также нужно будет убить эту подсказку, как только #some_bit находится за пределами области просмотра (не проблема, если триггер находится при наведении мыши).

На самом деле, если триггер наведен на мышь, вы можете использовать координаты курсора для позиционирования подсказки (вместо вычисления позиции #some_bit).

Answer 2

Я бы просто поместил всплывающую подсказку за пределы #pane div и поместил бы ее абсолютно с использованием JavaScript, так как вы все равно используете JS.

Я не использую Prototype, поэтому я не знаю, как онсделано в Prototype, но в jQuery вы бы использовали $(element).position(), чтобы получить позицию элемента.Если вам нужно сделать это вручную, это будет немного сложнее .

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

Answer 3

Редактировать: CSS используется

#tooltip {
    z-index: 9999;
    display: none;
    position: absolute;
}

Используется JS

Примечание: в jQuery его легко изменить наСинтаксис прототипа.

$('#some_bit').hover(function() {
    var docViewTop = $(window).scrollTop();
    var docViewBottom = docViewTop + $(window).height();

    // hovered element
    var offset = $(this).offset();
    var top = offset.top + docViewTop;
    var left = offset.left;
    var width = $(this).width();
    var height = $(this).height();
    var right = left + width;
    var bottom = top + height;

    // pane
    var poffset = $('#pane').offset();
    var ptop = poffset.top + docViewTop;
    var pleft = poffset.left;
    var pwidth = $('#pane').width();
    var pheight = $('#pane').height();
    var pright = pleft + pwidth;
    var pbottom = ptop + pheight;

    // tooltip
    var ttop = bottom;
    var tleft = right;
    var twidth = $('#tooltip').width();
    var theight = $('#tooltip').height();
    var tright = tleft + twidth;
    var tbottom = ttop + theight;

    if (tright > pright)
        tleft = pright - twidth;
    if (tbottom > pbottom)
        ttop = pbottom - theight;
    if (tbottom > docViewBottom)
        ttop = docViewBottom - theight;
    $('#tooltip').offset({top: ttop, left: tleft});
    $('#tooltip').css('display', 'block');
}, function() {
    $('#tooltip').hide();    
});

Редактировать: Посмотреть это здесь .