制作一个div元素弹出它的父有溢出：汽车

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"});})}); 

我希望这是你想要的。

Answer 2

如果你真的不能在真实世界的情况下做到这一点，然后使用JavaScript来操纵DOM。