我有一个<div>，这是一定的height and width, and overflow:hidden以便剪裁特定的内部图像；不过我想要一张图片<div>弹出边界（即覆盖overflow:hidden）， 我该怎么做呢？
诀窍是保持overflow:hidden元素与position:static并将溢出元素相对于更高的父元素定位（而不是相对于overflow:hidden父）。就像这样：
.relative-wrap {
/*relative on second parent*/
position: relative;
}
.overflow-wrap {
height: 250px;
width: 250px;
overflow: hidden;
background: lightblue;
/*no relative on immediate parent*/
}
.respect-overflow {
position: relative;
top: 75px;
left: 225px;
height: 50px;
width: 50px;
background: green;
}
.no-overflow {
position: absolute;
top: 150px;
left: 225px;
height: 50px;
width: 50px;
background: red;
}
<div class="relative-wrap">
<div class="overflow-wrap">
<div class="respect-overflow">
</div>
<div class="no-overflow">
</div>
</div>
</div>
我还想指出，希望元素以这种方式溢出其容器的一个非常常见的用例是，当您想要将下拉列表或容器的高度从 X 动画化到 0 时，因此需要overflow: hidden在容器上。通常你有一些东西inside不管怎样，你想要溢出的容器。由于这些元素仅在容器“打开”时才可访问，因此您可以利用并将溢出设置回visible after将容器完全打开，然后将其放回原位hidden在尝试将容器动画恢复到之前height: 0.
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
