Demo Fiddle

Question

是否可以在设置为溢出的div上显示内部div“top”？隐藏？

类似：

<div style="position:relative;overflow:hidden;" id="container">
   <div style="position:absolute;left:-15px;width:100px;height:100px;" class="product">product1</div>
   <div class="product-popup">Product1 price etc</div>
   <div style="position:absolute;left:10px;width:100px;height:100px;" class="product">product2</div>
   <div class="product-popup">Product2 price etc</div>
</div>

查看页面时，产品在#container - div的边界外不可见。当我点击类product-popup的div时，我想在#container - div的边界外显示弹出窗口。这可能吗？

Answer 1

简单回答，你不能。

如果你在父母身上设置overflow:hidden，它会对任何溢出进行设置，所以不要显示孩子。

您可能需要考虑您要完成的工作以及原因。

为了在父级的定义边界之外正确显示子内容，请考虑给父级固定高度/宽度（可选）的位置为relative。孩子应该完全位于此范围内，但可以置于其极限之外。只要在父项上设置overflow:hidden，它就会显示，并且子项的位置仍在浏览器视口中。

有关溢出和定位如何协同工作的示例，请参阅此FIDDLE。

如果您迫切希望在容器中的内容上保留overflow:hidden，只需将另一个包装器嵌入其中，例如

。

Demo Fiddle

HTML

<div class='parent'>
    <div class='content'>content
        <br>content
        <br>content
        <br>content
        <br>content
        <br>content
        <br>content
        <br>content
        <br>content
        <br>content
        <br>content
        <br>content
        <br>content
        <br>content
        <br>content
        <br>content
        <br>content
        <br>content
        <br>content
        <br>content
        <br>content
        <br>
    </div>
    <div class='popup'></div>
</div>

CSS

body {
    padding:50px;
}
.parent {
    position:relative;
    height:100px;
    width:100px;
    border:1px solid red;
}
.content {
    overflow:hidden;
    position:absolute;
    height:100%;
    width:100%;
    top:0;
    left:0;
    overflow:hidden;
    border:1px solid blue;
}
.popup {
    top:-20px;
    left:-20px;
    height:20px;
    width:20px;
    position:absolute;
    border:1px solid green;
}

Answer 2

无法“强制”在溢出：隐藏容器外显示某些内容。

您需要重新排列html。当您使用点击事件（JS？）时，您可以将弹出窗口放在其他位置，然后用JS显示它们。

Answer 3

正如@Mr_Green在评论中指出的那样，如果你设置位置，这是可能的：固定到内部div

<强> FIDDLE

<div class="outer">outer
    <div class="inner">
        inner
    </div>
</div>

CSS

.outer
{
    margin: 50px;
    width: 100px;
    height: 100px;
    background: yellow;
    overflow: hidden;
    position: relative;
}
.inner
{
    margin: 10px;
    width: 300px;
    position:fixed;
    height: 50px;
    background: pink;
}

话虽如此，我意识到在许多情况下使用固定位置是不可行的。

是否有可能显示设置为溢出的div的内部“顶部”：隐藏？

3 个答案:

Demo Fiddle

CSS