Javascript jQuery旋转木马，带overflow-y以显示容器外部的弹出窗口

我需要创建一个基于jQuery的旋转木马。将鼠标悬停在旋转木马项目上时，应在其上方显示一个相关的弹出div

此弹出div需要定位为显示在旋转木马包装器外部，但仍保持在悬停旋转木马项目上方沿x轴的位置。因此，我将popup div放置在carousel项目中，这样它就可以在CSS中以负top属性绝对定位，但相对于carousel项目

我遇到了一个问题，溢出：隐藏需要应用于旋转木马，这样它就不会显示页面加载上的所有旋转木马项目，但这将在需要显示悬停时切断弹出div

在carousel包装器上的CSS中，我尝试过使用以下内容，但没有成功，它的行为就像溢出一样：隐藏

overflow-x: hidden;
overflow-y: auto;

或

我提供了一个使用caroufredsel插件的JSFIDLE示例。在本例中，为了清晰起见，我使示例弹出div始终可见，而不是悬停。您可以看到文本，红色div的顶部被截断

想到的一个解决方案是，在旋转木马包装外面标记弹出div，这将解决它被切断的问题。但接下来的问题是，要确定相对于被悬停的旋转木马项目的位置/显示位置以及悬停的项目。在我走这条路之前，我想看看是否还有其他更好的想法

如果有人能给我任何方向来实现我概述的目标，无论是通过CSS还是一些定制的JS，那就太好了

谢谢你的期待

更新：

接受的解决方案意味着，如果转盘位于页面的中间，弹出DIV不会在滚动页面时沿Y轴停留在同一位置。

我已将我最初的解决办法与公认的答案结合起来。我在旋转木马外创建了一个单独的div，在这里我将用悬停旋转木马项目的弹出式HTML填充它。然后，我将使用Jquery对其进行绝对的重新定位。以下代码示例解决了我的问题，例如：

$('.carousel_item').mouseenter(function() {
   var $this = $(this);
   var posLeft = ($this.offset().left);
   var posTop = ($this.offset().top);

   //Pop up height
   var popHeight = ($('.popup', this).height());

   //Turn into negative number
   posTop = Math.abs(popHeight) * -1;;

   var popup_html = $('.popup', $this).html();

   $('#outside_popup').html(popup_html).css({
       top: posTop,
       left: posLeft
   }).fadeIn('fast');

}).mouseleave(function() {
     $('#outside_popup').fadeOut('fast');
});

---

我自己也曾经做过类似的事情。我相信这里会有人提出更好的解决方案，但我就是这样做的：

将弹出窗口与幻灯片嵌套在一起：

<div class="slide">
    <div class="slide_content"></div>
    <div class="popup">Hello!</div>            
</div>

​ 在IE7-9、Firefox、Chrome中测试

---

编辑：

我自己也曾经做过类似的事情。我相信这里会有人提出更好的解决方案，但我就是这样做的：

将弹出窗口与幻灯片嵌套在一起：

<div class="slide">
    <div class="slide_content"></div>
    <div class="popup">Hello!</div>            
</div>

​ 在IE7-9、Firefox、Chrome中测试

编辑：

$('.slide').mouseenter(function() {
    var $this = $(this);
    var posLeft = ($this.offset().left)-10
    var posTop = ($this.offset().top)-10
    $('.popup', $this).css({
                            position: 'fixed',
                            top: posTop,
                            left: posLeft
                           }).fadeIn('fast');

    }).mouseleave(function() {
        $('.popup', this).fadeOut('fast');
    });