溢出隐藏和绝对位置

Question

在以下标记中，我想设置.wrap之外的内部位置以获得以下结果：

但问题是.wrap有overflow: hidden自动生成且无法更改。有没有其他方法可以在不改变.wrap的css的情况下实现相同的结果？

HTML：

<div class="wrap">
    <div class="box">
        <div class="inner"></div>
    </div>
</div>

CSS：

.wrap{
    overflow: hidden; /* problem */
    width: 200px;
    height: 200px;
    background: yellow;
    position: relative;   
}

.inner{
    width: 10px;
    height: 100%;
    position: absolute;
    right: -50px;
    top: 0;
    background: green;
    z-index: 3;        
}

的jsfiddle： http://jsfiddle.net/bAGTg/

Answer 1

仅在.wrap添加overflow:visible !important;

Answer 2

将其替换为您的代码..

.wrap{
    overflow: visible;
    width: 200px;
    height: 200px;
    background: yellow;
    position: relative;   
}

祝你好运..