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

我有一个<div>，这是肯定的height和width，overflow:hidden因此特定的内部图像被裁剪了；但是我希望其中的一幅图像<div>弹出边框（即覆盖overflow:hidden），我该怎么做？

诀窍是使overflow:hidden元素与position:static上溢元素保持相对，并相对于较高的父元素（而不是overflow:hidden父元素）放置溢出元素。像这样：

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

我还想指出，一种非常常见的用例是希望元素以这种方式溢出其容器，即当您要将下拉列表或容器的高度从X动画化为0时，因此需要overflow: hidden在容器上进行动画处理。通常，无论您在容器内部有什么东西都想溢出。由于这些元素仅在容器“打开”时才可访问，因此您可以利用并将溢出设置为visible 在容器完全打开后再设置为，然后再将其设置为，然后hidden再尝试将容器动画化为height: 0。

我知道这是一篇旧文章，但是可以做到（至少在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/

所有给定的答案对我都不满意。在我看来，它们都很扎实，很难在复杂的布局中实现。

所以这是一个简单的解决方案：

一旦父母有某种程度的溢出，就没有办法让其子女覆盖它。

如果一个子项需要覆盖父项溢出，则一个子项可以具有与其他子项不同的溢出。

因此，请在每个子对象上定义溢出， 而不是在父对象上声明它：

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

overflow: hidden div用divcss属性为-的 另一个包装

transform: translate(0, 0);

并在特定标记中希望它覆盖- overflow: hidden，并用-设置

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

即-

.section {
    ...
    transform: translate(0, 0);
}

.not-hidden {
    position: fixed;
    ...
}

在这里看到小提琴

除非您更改HTML布局并将该图像移出父div，否则您将无法进行。多一点上下文可以帮助您找到可接受的解决方案。

上面的一切都不错，但是一切顺利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，最后应用原始位置以及可选的宽度和高度。

您可以通过将元素包装到另一个div中来将其从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中测试）http://jsfiddle.net/Ps76J/

我目前无法知道使溢出隐藏的父节点在其外部可以看到子节点（子节点除外position:fixed）。

但是，可以代替使用溢出，而可以将设置为背景颜色的outline属性与z-index属性结合使用来掩盖某些元素，而保留其他元素。

.persuado-overflow-hidden {
 /*gives the appearance of overflow:hidden*/
  z-index: -100;
  position: relative;
  outline: 1000vw solid white;
  overflow: visible;
}
.overridevisible {
/*takes the element out of the persuado overflow hidden*/
  z-index: 1;
}
/*does the other styling to the text*/
.loremcontainer {
  width: 60vw;
  height: 60vh;
  margin: 20vw;
  border: 1px solid;
}
.loremtxt {
  width: 100vw;
  height: 100vh;
  margin: -20vh;
  z-index: -1;
}
.positionmessage {
  z-index: 100;
  position: absolute;
  top: -12vh;
  left: -5vw;
  right: -5vw;
  color: red;
}

<div class="persuado-overflow-hidden loremcontainer">
<div class="loremtxt">
<div class="overridevisible positionmessage">Then, theres this text outside the paragraphs inside the persuado overflow:hidden element</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce porta lorem lorem, eu dapibus libero laoreet et. Fusce finibus, felis ac condimentum commodo, mauris felis dictum sapien, pellentesque tincidunt dui dolor id nulla. Etiam vulputate turpis eu lectus ornare, in condimentum purus feugiat. Donec ultricies lacinia urna, sit amet ultrices magna accumsan ut. Suspendisse potenti. Maecenas nisl nibh, accumsan vel sodales in, rutrum at sem. Suspendisse elit urna, luctus vitae urna ut, convallis ultricies tellus. Ut aliquet auctor neque, nec ullamcorper tortor ullamcorper vitae. Fusce at pharetra ante. Aliquam sollicitudin id ante sit amet sagittis. Suspendisse id neque quis nisi mattis vulputate. Donec sollicitudin pharetra tempus. Integer congue leo mi, et fermentum massa malesuada nec.
</div>
</div>

溢出是指容器不允许显示超大内容（设置为隐藏时）。它与可能发生溢出的内部元素无关：无论如何，仍然不会显示。

Z-index似乎不起作用，但是在这里，我有一个变通的解决方案，对我来说很好，因为在悬停子元素时我只需要溢出就可以“可见”：

#parent {
   overflow: hidden;
}

#parent:hover {
   overflow: visible;
}

对于这个问题，我有一个非常简单的解决方案：使用“ pre”标签。我知道pre标记等效于在编程中使用“ goto”，但是嘿：它起作用了！

<div style="overflow: hidden; width: 200px;">
  <pre style="overflow: auto;">
    super long text which just goes on and on and on and on and one, etc.
  </pre>
</div>