javascript - 如何在 LI 中强制 DIV(带有溢出隐藏样式)仍然显示

Question

我有 3 个带有 class=box 的 LI，它们的样式设置为 overflow hidden 。我需要在一个框内创建一个带有 class=badge 的 DIV(在本例中为第 3 个/蓝色框)。

我的目标是:
1. 此徽章 DIV(设置为绝对位置)遵循或可以用作该特定框的相对位置的引用。 2.这个黄色徽章DIV可以显示在蓝色框外。

我一直在尝试很多事情来制作这个不可能完成的任务代码，但我想知道这里是否有人已经这样做过。

首选解决方案:Javascript 或 jQuery，如果可能，至少在 IE9 下可以在 IE8 中运行。

HTML:

<div class="container">
    <li class="box" style="background-color: red;">
        red
    </li>
    <li class="box" style="background-color: green;">
        green
    </li>
    <li class="box" style="background-color: blue;">
        <div style="background-color: #ff0;" class="badge">badge</div>
        blue
    </li>
</div>

CSS:

.container {
    border:1px solid black;
    width: 500px;
    height: 120px;
    margin: 20px auto 0px;
    background-color: grey;
}
.badge {
    position: absolute;
    width:100px;
    height: 100px;
    border: 1px solid black;
    text-align: center;
    vertical-align: middle;
    bottom: -55px;
}
.box {
    float: left;
    width:100px;
    height: 100px;
    border: 1px solid black;
    margin: 10px; 5px;
    text-align: center;
    vertical-align: middle;
    position: relative;
    /*overflow: hidden;*/
}

注意:溢出隐藏代码已注释，供您查看我需要的输出。

我这里有一个 jsfiddle 供快速引用:
http://jsfiddle.net/philcyb/1m73qewm/

Answer 1

你可以试试看 like this :

var $badge = $('div.badge'),
    xOffset = $badge.offset();
$badge.appendTo('body').css({
    top: xOffset.top,
    left: xOffset.left
});

您可能还需要添加 scrollTop() 等。