CSS verschieben relative Positionierung div nach außerhalb des Überlaufs versteckte div

Question

Ich muss ein div zum Überlauf versteckte Eltern div bewegen. Ich benutze ein Plugin auf der Seite. Also kann ich die Reihenfolge nicht ändern. Ich möchte grüne Box über die blaue und rote Box bewegen. Ich hoffe, es gibt eine Lösung.

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

Wichtiger Hinweis: Wenn ich das übergeordnete divs Position Attribut ändern, Plugin nicht richtig funktioniert.

#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. Verschieben box2 Überlauf-Attribut auf Box1.
2. Geben Sie Padding zu Box1.
3. Geben Sie box3 einen negativen Wert, um herauszufallen.

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

Siehe http://jsfiddle.net/xmct0wot/

Änderungen an box2 und box3 notwendig waren:

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