绝对定位的内部 DIV 可以在不绝对定位外部 DIV 的情况下尊重其父级的'overflow:hidden”吗？

如果没有外层DIV的绝对定位，绝对位置的嵌套DIV是否可以隐藏溢出？

在两个DIV嵌套的场景中，当外部 DIV 正常定位且内部 DIV 绝对定位时，内部 DIV 可能不会遵守外部 DIV 的溢出隐藏属性DIV.

要解决此问题而不诉诸外部 DIV 的绝对定位（这可能会破坏预期布局），请考虑以下事项：

外部 DIV 的相对位置和绝对位置内部 DIV

将外部 DIV 定位为position:relative，将内部 DIV 定位为position:absolute。这允许内部 DIV 继承其父级的相对定位并遵守溢出隐藏属性。

示例代码：

#first {
    ...
    position: relative;
    overflow: hidden;
}

#second {
    ...
    position: absolute;
}

使用此配置，内部 DIV DIV 将绝对定位在外部 DIV 内，并将尊重其溢出隐藏属性，有效隐藏任何溢出

注意：如果内部 DIV 需要“长出”表格单元格 (TD)，则此解决方案可能不合适。

替代选项

如果内部 DIV 的相对位置不是一个选项，请考虑使用 CSS 裁剪技术。为外部 DIV 创建剪切路径并将其应用到内部 DIV。这允许内部 DIV 增长到外部 DIV 的边界之外，同时仍然遵守其溢出边界。

示例代码：

#outer-container {
    position: relative;
    width: 200px;
    height: 200px;
}

#inner-element {
    width: 400px;
    height: 400px;
    clip-path: path("M0 0 L 200 0 L 200 200 L 0 200 Z");
}

以上是绝对定位的内部 DIV 可以在不绝对定位外部 DIV 的情况下尊重其父级的'overflow:hidden”吗？的详细内容。更多信息请关注PHP中文网其他相关文章！