Html 强制元素在溢出之外显示：隐藏
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17328947/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
force element to display outside of overflow:hidden
提问by Mike
This is probably attempting the impossible, but I would like to display an element outside of an element that is overflow: hidden. I know that makes no sense and things are working as they should, but just wanted to double check to see if there is a way.
这可能是在尝试不可能的事情，但我想在overflow: hidden. 我知道这毫无意义，而且事情正在按预期进行，但只是想仔细检查一下是否有办法。
Best described with this code:
最好用此代码描述：
.outer {
position: fixed;
top: 30px;
left: 50px;
overflow: hidden;
height: 30px;
width: 300px;
background: red;
}
.inner {
position: relative;
}
.show-up {
width: 100px;
height: 300px;
background: green;
position: absolute;
left: 20px;
overflow: visible;
}<div class="outer">
<div class="inner">
<div class="show-up">this needs to show up ALL 300 pixels high of it</div>
</div>
</div>采纳答案by showdev
The overflow:hiddendefinition will hide anything inside that element that extends beyond its bounds.
该overflow:hidden定义将隐藏该元素内超出其边界的任何内容。
Depending on your specific application, you may be able to use a structure like this:
根据您的特定应用程序，您可以使用这样的结构：
.container {
position: fixed;
top: 30px;
left: 50px;
height: 30px;
width: 300px;
background: red;
}
.outer {
overflow: hidden;
}
.inner {
position: absolute;
}
.show-up {
width: 100px;
height: 300px;
background: green;
position: relative;
margin-left: 20px;
}<div class="container">
<div class="outer">
<div class="inner"></div>
</div>
<div class="show-up">this needs to show up ALL 300 pixels high of it</div>
</div>回答by JerryGoyal
Make an additional outer div with position relative and set the absolute position of the div you want to move outside of the overflow hidden div.
使用相对位置创建一个额外的外部 div，并设置要移动到溢出隐藏 div 之外的 div 的绝对位置。
.container{
position:relative;
}
.overflow-hid-div{
overflow:hidden;
margin-left:50px;
width:200px;
height: 200px;
background-color:red;
}
.inner{
width:50px;
height: 50px;
background-color:green;
position: absolute;
left:25px;
top:25px;
}<div class='container'>
<div class='overflow-hid-div'>
<div class='inner'>
sup!
</div>
</div>
</div>回答by mrida
please check the following fiddle I created: http://jsfiddle.net/NUNNf/12/
请检查我创建的以下小提琴：http: //jsfiddle.net/NUNNf/12/
You should add an external container like such:
您应该添加一个像这样的外部容器：
<div class="container">
<div class="outer">
<div class="inner">
...
</div>
</div>
<div class="show-up">this needs to show up ALL 300 pixels high of it</div>
</div>
and then add the elements inside.
然后在里面添加元素。
Styling:
造型：
.outer {
position: absolute;
top: 30px;
left: 50px;
overflow:hidden;
height: 30px;
width: 300px;
background: red;
}
.container {
position:relative;
}
.inner {
position: relative;
}
.show-up{
width: 100px;
height: 300px;
background: green;
position: absolute;
left: 20px;
overflow: visible;
top: 30px;
}
回答by Timmmm
I was struggling for ages with this for a tooltip. My containing element is overlay: hiddenand add I can't add extra wrapper divsbecause it causes some weird bug with flexbox and ResizeObserver. As far as I know there is no way for a position: absoluteelement to escape a parent that is bothoverlay: hiddenand position: relative.
我为这个工具提示苦苦挣扎了很长时间。我的包含元素是overlay: hidden并添加我无法添加额外的包装器，divs因为它会导致 flexbox 和ResizeObserver. 据我所知，position: absolute元素无法逃避既是overlay: hidden又是 的父元素position: relative。
However I discovered that position: fixedelements aren't clipped by overlay: hiddenat all, and it's actually easier to use position: fixedin my case. Might be an option for some.
但是我发现，position: fixed元件不被截断overlay: hidden在所有的，它实际上是更容易使用position: fixed在我的情况。可能是某些人的选择。
