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

Question

我有一个<div>，这是一个height和width，以及overflow:hidden，以便剪切特定的内部图像;但是我希望<div>中的一个图像弹出边界（即覆盖overflow:hidden），我该怎么做？

Answer 1

诀窍是将overflow:hidden元素与position:static保持在一起，并将溢出元素相对于更高的父元素（而不是overflow:hidden父元素）定位。像这样：

＆＃13;

＆＃13;

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

＆＃13;

<div class="relative-wrap">
    
    <div class="overflow-wrap">
        
        <div class="respect-overflow">
        
        </div>
        <div class="no-overflow">
            
        </div>
        
    </div>
    
</div>

＆＃13;

＆＃13;

＆＃13;

我还想注意，一个非常常见的用例是希望让元素以这种方式溢出它的容器是你想要将下拉列表或容器的高度从X设置为0，因此需要{ {1}}在容器上。通常，无论如何，您都要在容器内部 。由于这些元素仅在容器打开时才可访问，因此您可以利用并在容器完全打开后将溢出设置回overflow: hidden ，然后在尝试将容器设置为visible之前，请将其设置回hidden。

Answer 2

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

Answer 3

所有给出的答案都不满足于我。 在我看来，它们都是hackish，很难在复杂的布局中实现。

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

一旦父母有一定的溢出，就没有办法让孩子覆盖它。

如果孩子需要覆盖父溢出，那么孩子的溢出可能与其他孩子不同。

所以定义每个孩子的溢出 而不是在父上声明：

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

Answer 4

除非您更改HTML布局并将该图像移出父div，否则您不能这样做。更多上下文可以帮助您找到可接受的解决方案。

Answer 5

将您的2017-07-11 10:52:52.864 INFO 17896 --- [main] n.lifecycle: Can't find configuration file [conf\general.properties] 2017-07-11 10:52:52.865 ERROR 17896 --- [main] n.lifecycle: configuration file [null] not found (use default properties as error handling) overflow: hidden换成另一个{c}属性为{/ p>}的div

div

并在您的specefic标签中，您希望它覆盖 - transform: translate(0, 0);，请将其设置为 -

overflow: hidden它将继续相对于其父级

的位置

即 -

position: fixed;

<强> See the fiddle here

Answer 6

你可以通过将一个元素包装在另一个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/

Answer 7

以上所有内容都不错，但没有什么比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，最后应用原始位置和可选的宽度和高度。

Answer 8

我目前无法知道如何使隐藏溢出的父节点在其外部显示子节点（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>

Answer 9

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

Answer 10

只需将 position:absolute 赋予需要脱离 div 标签的图像即可。 图像相对于文档（或正文）定位。

下面是证明相同的代码

div {
  height: 500px;
  width: 500px;
  overflow: hidden;
  border: 1px solid black;
}

img:nth-child(1) {
  height: 200px;
  position: absolute;
  margin-left: 300px;
}

img:nth-child(2) {
  height: 400px;
}

<div>
  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/Image_created_with_a_mobile_phone.png/1200px-Image_created_with_a_mobile_phone.png">
  <img src="https://www.w3schools.com/w3css/img_lights.jpg">
</div>

Answer 11

您可以通过将 'overflow:hidden' div 包装在另一个 div 中来实现。 示例：

<div class="outer">
  <div class="inner">
    <img src="img1" alt="">
  </div> 
  <img src="img2" alt="">
</div>

.outer, .inner{
   position:relative;
}

.inner{
  overflow:hidden;
}

img{
  position:absolute;
}

在上面的例子中，div 中所有类为 'inner' 的元素都会受到 'overflow:hidden' 的影响。放置在内部 div 之外的图像将可以自由移出边界。

这样我们可以让某些图片从内部 div 中弹出。

Answer 12

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

#parent {
   overflow: hidden;
}

#parent:hover {
   overflow: visible;
}

Answer 13

我有一个解决这个问题的超级简单方法：使用“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>