CSS는 상대 위치 지정 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. 이동 BOX2 오버 플로우 속성는 BOX1합니다.
2. 상자 1에 채우기를 지정하십시오.
3. box3에 음수 값을 지정하면 튀어 나오게됩니다.

에 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에 필요했다 참조 :