CSS / JavaScript - 元素外的内容溢出:隐藏

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/3590928/
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

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-23 05:20:51  来源:igfitidea点击:

CSS / JavaScript - content outside a element with overflow:hidden

javascriptcssoverflowabsolute

提问by Alex

I have a container div element that has overflow:hiddenon it. Unfortunately this property is required on it because of the way the site is made.

我有一个容器 div 元素overflow:hidden。不幸的是,由于网站的制作方式,此属性是必需的。

Inside this div it's all the site content, including some tooltips. These tooltips are displayed with jQuery when you mouse over a link or something.

在这个 div 里面是所有的网站内容,包括一些工具提示。当您将鼠标悬停在链接或其他内容上时,这些工具提示会与 jQuery 一起显示。

The problem is that some of these tooltips will display partially hidden because of the overflow thing above, because they are positioned outside the container div...

问题是,由于上面的溢出内容,其中一些工具提示将显示部分隐藏,因为它们位于容器 div 之外...

Is there any way to be able to show a specific element from inside this container, even if it's out of its boundaries? Maybe a javascript solution?

有什么办法可以从这个容器内部显示一个特定的元素,即使它超出了它的边界?也许是一个javascript解决方案?

the html looks like this:

html 看起来像这样:

<div style="overflow:hidden; position:relative;">

  the main content

  <div style="position:absolute;left:-100px;top:-50px;"> the tooltip thing </div>

</div>

回答by Vaibhav Gupta

try this:

尝试这个:

<div style="position:relative;">    
  <div style="overflow:hidden; position: relative; width: {any}; height: {any};">the main content<div>    
  <div style="position:absolute;left:-100px;top:-50px;"> the tooltip thing </div>    
</div>

just place your main content to another div inside the main div and give provided css to hide the content if overflowing...

只需将您的主要内容放在主 div 内的另一个 div 中,并提供提供的 css 以在溢出时隐藏内容...

回答by Moin Zaman

if overflow:hidden is to contain floats, then there are other ways that would allow tooltips to not be cut off. look foe clearfix:after

如果 overflow:hidden 包含浮动,那么还有其他方法可以让工具提示不被切断。看看敌人 clearfix:after