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

前端之家收集整理的这篇文章主要介绍了HTML – 是否有可能显示设置为溢出的div的内部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;
}
原文链接:https://www.f2er.com/html/426042.html

猜你在找的HTML相关文章