Overflow Hidden Hides Postion Absolute Block. If Position Absolute block is out of the parent block than it is disappered

Question

This is my style.

<style>
.wrapper { margin:0px auto; height:600px; width:600px; position:relative; background:#F2F7FF; padding:20px; overflow:hidden }
.pos-rel { width:90%; background:#FFF; height:400px; position:relative; padding:5%; }
.pos-abs { position:absolute; height:100px; width:200px; position:absolute; background:#89BCFF; border:1px solid #517099; right:-110px; }
</style>

This is my HTML :

<div class="wrapper">
    Wrapper
    <div class="pos-rel">
        Position relative Parent block
        <div class="pos-abs">
            Position Absoulute child block
        </div>
    </div>
</div>

JSFIDDLE HERE

Problem is : The block having position absolute is visible only half. Half block is hidden due to wrapper.

Before you give any solution, i must state that i have to used Overflow:hidden in the parent block.

Answer 1

Actually, you can avoid parent's overflow:hidden, if you remove position:relative from .wrapper. Here is working example

Answer 2

Can you tell me what you want to create like if you are using overflow: hidden then it will not come. or else you have to reduce right minus margin from right. can you make it more clear like why you want this..