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

发布时间：2020-12-14 22:53:27 所属栏目：资源来源：网络整理

导读：是否有可能显示设置为溢出的div的内部“顶部”：隐藏？就像是：查看页面时,产品在#container-div的边界外不可见.当我用class product-popup单击div时,我想在#container-div的边界外显示弹出窗口.这可能吗？最佳答案简单的回答,你不能. 如果你设置溢出：

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

就像是：


查看页面时,产品在#container-div的边界外不可见.当我用class product-popup单击div时,我想在#container-div的边界外显示弹出窗口.这可能吗？


最佳答案
简单的回答,你不能.
如果你设置溢出：隐藏在父级上,它会对任何溢出都这样做,所以不要显示孩子.
您可能需要考虑您要完成的任务以及原因.
为了在父类的定义边界之外正确显示子内容,请考虑给父级固定高度/宽度(可选)以及相对位置.孩子应该完全位于此范围内,但可以置于其极限之外.只要在父级上设置了overflow：hidden,就会显示它,并且子级的位置保持在浏览器视口中.
有关溢出和定位如何协同工作的示例,请参见此FIDDLE.
如果您迫切希望保持溢出：隐藏在容器内的内容上,只需将另一个包装器嵌入其中,例如
Demo Fiddle
HTML


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


                        （编辑：李大同）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!