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

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

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

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

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

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

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

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

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

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

Изменить: используется 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();    
});

Изменить: см. здесь.