html - 使一个 div 元素弹出它的父元素有溢出 :auto

Question

有没有办法让 .bar 弹出 .foo 和 .plaa 以及 .baz 的边界 在下面的例子中:

jsfiddle

HTML:

<div class="plaa">
    <div class="foo">
        FOO
        <div class="bar">
            BAR
        </div> 
    </div>
</div>
<div class="baz">
    BAZ
</div>

CSS:

.bar{
    display:none;
    width:420px;
    height:420px;
    background-color:pink;
    z-index:420;
    position:absolute;
    overflow:auto;

}
.foo{
    width:50px;
    height:50px;
    background-color:orange;
    cursor:pointer;
    position:relative;

}
.baz{
    position:absolute;
    top:55px;
    background-color:yellow;
}
.plaa{
    position:absolute;
    overflow:auto;
    max-width:50px;
    max-height:50px;
}

JS:

$(".foo").click(function(){$(".bar").toggle()});

当我从 .plaa 中删除 overflow:auto; 时它工作正常，但不幸的是我不能在我的真实世界中这样做。

Answer 1

做出这些改变

.plaa{
position:absolute;
max-width:50px;
max-height:50px;

$(".foo").click(function(){$(".bar").toggle(function(){$(".bar").css({"overflow":"visible"});})});

希望这就是你想要的。