首页 > web前端 > css教程 > 正文

为什么不溢出:隐藏使用绝对定位的内部 DIV 工作,除非外部 DIV 相对定位?

Mary-Kate Olsen
发布: 2024-11-27 18:23:15
原创
791 人浏览过

Why Doesn't Overflow:hidden Work with Absolutely Positioned Inner DIVs Unless the Outer DIV is Positioned Relatively?

溢出隐藏和绝对定位

在嵌套 DIV 的场景中,外部 DIV 存在溢出:隐藏属性和内部 DIV绝对定位,内部 DIV 可能不遵守外部 DIV 的溢出约束。当外部 DIV 没有绝对定位时,就会发生这种情况。将外部 DIV 更改为绝对位置可能会破坏整体布局。

要解决此问题,同时保持内部 DIV 在表格单元格内的所需位置,可以采用另一种方法:

  1. 将外部 DIV 设置为position:relative。这将为内部 DIV 建立一个新的坐标系。
  2. 将内部 DIV 的位置更改为position:absolute。这会将内部 DIV 相对于其最近定位的祖先进行定位,在本例中为外部 DIV。

示例:

#first {
    width: 200px;
    height: 200px;
    background-color: green;
    position: relative;
}

#second {
    width: 50px;
    height: 400px;
    background-color: red;
    position: absolute;
    left: 0px;
    top: 0px;
}
登录后复制
<table>
登录后复制

通过此调整,外部 DIV 的溢出:隐藏属性现在将正确约束内部 DIV,防止其内容超出外部 DIV 的边界DIV。此外,此解决方案允许内部 DIV 按预期生长到表格单元格之外。

以上是为什么不溢出:隐藏使用绝对定位的内部 DIV 工作,除非外部 DIV 相对定位?的详细内容。更多信息请关注PHP中文网其他相关文章!

来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板