允许特定标记覆盖overflow：hidden [英] Allow specific tag to override overflow:hidden

问题描述

我有一个< div> ，这是一个确定的高度和 width 和 overflow：hidden ，以便剪切特定内部图像;然而我想要< div> 中的一个图像弹出边框（即覆盖 overflow：hidden

诀窍是保留 overflow：hidden <> 元素与 position：static ，并将溢出元素相对于更高的父级（而不是 overflow：hidden parent）。像这样：

http://jsfiddle.net/kv0bLpw8/

我还想注意，一个非常常见的用例是希望有一个元素以这种方式溢出它的容器是当你想要一个下拉菜单或容器从X到0，因此需要在容器上具有 overflow：hidden 。通常你有一些在内你想要溢出的容器。由于这些元素仅在容器打开时可访问，所以您可以利用并将溢出设置为 visible 之后打开，然后将其设置为 hidden ，然后尝试将容器动画化回 height：0 。

I've got a <div>, that's a certain height and width, and overflow:hidden so that specfic inner images are clipped; however I want one image in the <div> to pop out of the border (ie to override the overflow:hidden), how do I do this?

解决方案

The trick is to keep the overflow:hidden element with position:static and position the overflowing element relative to a higher parent (rather than the overflow:hidden parent). Like so:

http://jsfiddle.net/kv0bLpw8/

I also want to note, a very common use case for the desire to have an element overflow its container in this way is when you want animate the height of a dropdown or container from X to 0, and therefore need to have overflow: hidden on the container. Usually you have something inside the container that you want to overflow regardless. Since these elements are only accessibly when the container is "open", you can take advantage and set the overflow back to visible after the container is fully open, and then set it back to hidden before trying to animate the container back to height: 0.

这篇关于允许特定标记覆盖overflow：hidden的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！