允许特定标签覆盖溢出：隐藏
我有一个<div> ，这是一定的height和width ， overflow:hidden以便特定的内部图像被剪切; 但是我想在<div>中popup一个图像（即覆盖overflow:hidden ），我该怎么做？
诀窍是保持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; }
这是一个小提琴：
你不能，除非你改变你的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; ... }
看这里的小提琴
