CSS move relative positioning div to outside the overflow hidden div - css

Question

I have to do move a div to overflow hidden parent div. I use some plugin on the page. So I can't change divs ordering. I want to move green box over the blue and red box. I hope there is a solution.
https://jsfiddle.net/bigboytr/zssub946/
Important note : If I change the parent divs position attribute, plugin not working properly.
#box1 {
position: absolute;
background: red;
padding: 5px;
width: 150px;
height: 150px;
}
#box2 {
position: absolute;
overflow: hidden;
background: blue;
width: 100px;
height: 100px;
}
#box3 {
position: relative;
background: green;
width: 50px;
height: 50px;
top: -10px;
}
<div id="box1">
<div id="box2">
<div id="box3"></div>
</div>
</div>

Answer 1

Move box2 overflow attribute to box1.
Give padding to box1.
Give negative value to box3 to pop out.
#box1 {
position: absolute;
background: red;
width: 100px;
height: 100px;
padding: 5px;
overflow: hidden;
}
#box2 {
position: absolute;
background: blue;
width: 100px;
height: 100px;
}
#box3 {
position: absolute;
background: green;
width: 50px;
height: 50px;
top: -5px;
right: 0;
}
<div id="box1">
<div id="box2">
<div id="box3"></div>
</div>
</div>

Answer 2

#box1 { position: absolute; background: red; padding: 5px; width: 150px; height: 150px; }
#box2 { position: absolute; overflow: hidden; background: blue; width: 100px; height: 100px; }
#box3 { position: relative; background: green; width: 50px; height: 50px; top: -10px; }
#box3 {
/* left 150px (box1) - box3 width 50px = 100px */
z-index: 2; padding: 0; top: -5px; left: 100px }
#box2 { overflow: visible }
<br/><br/><br/>
<div id="box1">
<div id="box2">
<div id="box3"/>
</div>
</div>
See http://jsfiddle.net/xmct0wot/
Changes were necessary to box2 and box3:
#box3 { width: 160px; height: 160px;
/* 160px because width, height = 150px plus 5px + 5px padding */
z-index: 2; padding: 0; top: -5px; left: -5px }
#box2 { overflow: visible }