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

Question

我有一个<div>,这是一个特定的height和width,并overflow:hidden让specfic内的图像被剪切; 但是我想要一个图像<div>弹出边界(即覆盖overflow:hidden),我该怎么做？

Answer 1

诀窍是保持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.

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

overflow: hidden div用另一个div具有 css 属性的包裹你-

transform: translate(0, 0);

并在您希望它覆盖 - 的特定标签中overflow: hidden，将其设置为 -

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

IE -

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

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

请参阅此处的小提琴

Answer 4

所有给出的答案都不满足于我.在我看来,它们都是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 5

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