如何使绝对定位的内部 DIV 尊重其父级的 Overflow:hidden 属性？

绝对位置与溢出隐藏

困境：

我们有两个嵌套的 DIV：一个带有溢出的外部 DIV：隐藏并绝对定位内部 DIV。默认情况下，内部 DIV 不会遵循外部 DIV 的溢出行为。我们怎样才能在不将外部 DIV 的位置更改为绝对位置（这会破坏我们的布局）的情况下保持这种行为？

解决方案：

确保内部 DIV 尊重外部 DIV 的位置Overflow 属性：

1. 将外部 DIV 的位置更改为相对。
2. 保持内部 DIV 的绝对定位。

示例：

#outer {
  width: 200px;
  height: 200px;
  background-color: green;
  overflow: hidden;
  position: relative;  // Make outer DIV relative
}

#inner {
  width: 50px;
  height: 50px;
  background-color: red;
  position: absolute;  // Keep inner DIV absolute
  left: 250px;
  top: 250px;
}

附加说明：

• 使用位置：外部 DIV 的相对值不会影响其显示或布局。
• 内部 DIV 必须保持position:absolute，以“逃离”外部 DIV 的边界，同时仍尊重其溢出行为。
• 对于内部 DIV 从表格单元格中长出的特定情况，解决方案保持不变。通过将外部表格单元格定位为相对，将内部 DIV 定位为绝对，即可达到所需的效果。

以上是如何使绝对定位的内部 DIV 尊重其父级的 Overflow:hidden 属性？的详细内容。更多信息请关注PHP中文网其他相关文章！