允许特定标签覆盖溢出:隐藏

我有一个<div> ,这是一定的heightwidthoverflow:hidden以便特定的内部图像被剪切; 但是我想在<div>中popup一个图像(即覆盖overflow:hidden ),我该怎么做?

9 Solutions collect form web for “允许特定标签覆盖溢出:隐藏”

诀窍是保持overflow:hidden元素的position:static并将溢出元素相对于较高父元素(而不是overflow:hidden parent)定位。 像这样:

 .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> 

我知道这是一个旧的post,但这可以做到(至less在Chrome中)。 大约两年前,我想到了这个,为我省了几次机会。

设置孩子有固定的位置,并使用余量而不是顶部和左侧来定位它。

 #wrapper { width: 5px; height: 5px; border: 1px solid #000; overflow: hidden; } #parent { position: relative; } button { position: fixed; margin: 10px 0px 0px 30px; } 

这里是一个例子: http : //jsfiddle.net/senica/Cupmb/

所有给出的答案,不满足我。 他们都认为我的观点很难,而且在复杂的布局上很难实施。

所以这是一个简单的解决scheme:

一旦父母有一定的溢出,没有办法让其子女覆盖这一点。

如果一个孩子需要重写父溢出,那么一个孩子可以有一个不同于其他孩子的溢出。

所以定义 每个孩子溢出, 而不是父级上声明:

 <div class="panel"> <div class="outer"> <div class="inner" style="background-color: red;"> <div> title </div> <div> some content </div> </div> </div> </div> .outer { position: relative; overflow: hidden; } .outer:hover { overflow: visible; } .inner:hover { position: absolute; } 

这是一个小提琴:

http://jsfiddle.net/ryojeg1b/1/

你不能,除非你改变你的HTML布局,并将该图像移出父div。 多一点上下文将帮助您find一个可接受的解决scheme。

你可以通过将其包含在另一个div中将溢出的元素溢出,然后将图像设置为position:absolute; 并使用余量抵消它。

 <div class="no-overflow"> <div> <img class="escape" src="wherever.jpg" /> </div> </div> .no-overflow{ overflow:hidden; width: 500px height: 100px } .escape{ position: absolute; margin-bottom: -150px; } 

例子(在Firefox + IE10中testing) http://jsfiddle.net/Ps76J/

溢出是指容器不允许显示过大的内容(当设置为隐藏时)。 它与内部元素没有任何关系,可以溢出:不pipe怎样,仍然不会被显示。

Z-index似乎并没有工作,但在这里我有一个解决scheme,对我来说工作得很好,因为我需要溢出只有当hover子元素“可见”:

 #parent { overflow: hidden; } #parent:hover { overflow: visible; } 

以上所有都很好,但没有什么比击败JAVASCRIPT 。 (使用jquery )。 所以,

 <script> var element = $('#myID'); var pos = element.offset(); var height = element.height(); // optional element.appendTo($('body')); // optional element.css({ position : 'fixed' }).offset(pos).height(height); </script> 

我所做的是获取元素的原始位置(相对于页面),可选地获取高度或宽度,可选地将元素附加到主体,应用新的css规则position : fixed并且最后应用原始位置并且可选地宽度和高度。

包装你的overflow: hidden div与另一个具有css属性的div

transform: translate(0, 0);

并在你的specefic标签,你想它覆盖 – overflow: hidden ,设置它 –

position: fixed; 它将继续相对于其母公司的地位

即 –

 .section { ... transform: translate(0, 0); } .not-hidden { position: fixed; ... } 

看这里的小提琴

  • 如何保留包含在HTML <pre>标记中的文本的空格缩进,排除文档中<pre>标记的当前缩进级别?
  • 用HTML和CSS进度条
  • Google Chrome自动填充并显示黄色背景
  • 如何在ui-router中使用ui-sref传递参数给控制器
  • 什么时候使用IMG与CSS背景图像?
  • 使div(高度)占据父级剩余高度
  • 如何读取jQuery中的xml文件内容并显示在html元素中?
  • 具有多个相同名称的隐藏控制元素的HTML表单
  • 防止页面内的button在点击时刷新页面
  • <a>里面的<a>获取蓝色边框
  • 如何阅读使用JavaScript的发布请求参数