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

Question

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

就像是:

<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 边界外不可见.当我点击带有类的div时,product-popup我想在#container-div 的边界外显示弹出窗口.这可能吗？

Answer 1

简单的回答，你不能。

如果您overflow:hidden在父级上进行设置，它将对任何溢出执行此操作，因此不会显示子级。

您可能需要思考您想要实现的目标以及原因。

为了正确显示父级定义边界之外的子级内容，请考虑为父级提供固定高度/宽度（可选），位置为relative。孩子的位置应该绝对在此范围内，但也可以放置在其限制之外。只要overflow:hidden父级上未设置，它就会显示，并且子级的位置保留在浏览器视口内。

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

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

演示小提琴

超文本标记语言

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