How to force DIV inside an LI (with overflow hidden styling) still show

Question

I've got 3 LI with class=box and they are styled with overflow hidden. I need to create a DIV with class=badge inside one box (in this case the 3rd/blue box).

My objective is:
1. that this badge DIV (set as position absolute) follows or can use as reference the relative position of that particular box. 2. that this yellow badge DIV can be displayed outside of the blue box.

I have been trying a lot of things to make this mission impossible code, but I was wondering if anybody here has already done this before.

Preferred solution: Javascript or jQuery and workable in IE8 if possible if not at least IE9.

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;*/
}

NOTE: overflow hidden code is commented, for you to see the output I need to have.

I have a jsfiddle here for quick reference:
http://jsfiddle.net/philcyb/1m73qewm/

Answer 1

You could try something like this :

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

You probably need to add scrollTop() and the like too.

Answer 2

So the simplest solution that is supported by what you require would be to add another parent that does your clipping for you.

Simple have the structure such as .box > .box-inner > text + badge

An example of how that would look for your blue box would be.

<li class="box" style="background-color: blue;">
    <div class="box-inner">
        Blue
    </div>
    <div style="background-color: #ff0;" class="badge">badge</div>
</li>

The CSS for the inner box would be

.box-inner {
   width:100%;
   height:100%;
   overflow:hidden;
}

I have updated your fiddle with what that would look like.

FIDDLE http://jsfiddle.net/1m73qewm/12/

Answer 3

HTML:

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

CSS:

.box {
    float: left;
    width:100px;
    height: 100px;
    border: 1px solid black;
    margin: 10px; 5px;
    text-align: center;
    vertical-align: middle;
    position: relative;
    overflow: hidden;
}

I presume this is what you mean't ! Just see the changes in the above code.