相対的な位置のdivをオーバーフローの外に移動div隠しdiv

Question

私はdivをオーバーフローさせるdivを移動する必要があります。私はそのページでいくつかのプラグインを使用しています。だからdivsの注文を変更することはできません。私は青と赤のボックスの上に緑のボックスを移動したい。私は解決策があることを願っています。

https://jsfiddle.net/bigboytr/zssub946/

重要な注意：私は、プラグイン、親のdivの位置属性を変更した場合は正常に動作しません。

#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

1. BOX1へ移動BOX2オーバーフロー属性。
2. ボックス1にパディングを与えます。
3. ボックス3に負の値を指定すると、ポップアウトします。 StackOverflowのへ

#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>

http://jsfiddle.net/xmct0wot/

変更がBOX2と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 }