如何正确设置具有绝对定位子级的父级容器的高度？

绝对位置和父容器高度

使用绝对定位的元素时，确定其父容器的高度变得很困难。当子元素绝对或相对定位在父容器内时，并且您希望为父元素设置合适的高度以确保其子元素保持在其边界内时，就会出现此问题。

要解决此问题，至关重要认识到绝对定位的元素已从文档流中删除，使它们无法影响其父容器的尺寸。如果需要为子元素设置“position:absolute”，请考虑在子元素渲染后使用 JavaScript 动态调整父容器的高度。这涉及使用 JavaScript 计算绝对定位子元素的高度，然后将该值应用于父容器的高度。

但是，存在更直接的解决方案，即利用 float 属性和边距来模拟绝对定位，而将子元素保留在文档流中。通过为子元素设置浮点值（例如，float: left）并合并边距，您可以实现所需的定位。此外，在父容器上设置overflow:hidden或实施任何其他clearfix技术会强制其高度扩展以匹配其子元素的大小。

以下是如何使用CSS实现此定位的示例：

article {
  position: relative;
  overflow: hidden;
}

.one {
  position: relative;
  float: left;
  margin-top: 10px;
  margin-left: 10px;
  background: red;
  width: 30px;
  height: 30px;
}

.two {
  position: relative;
  float: right;
  margin-top: 10px;
  margin-right: 10px;
  background: blue;
  width: 30px;
  height: 30px;
}

通过应用这些技术，您可以有效地控制子元素的位置并为其父容器保持适当的高度。

以上是如何正确设置具有绝对定位子级的父级容器的高度？的详细内容。更多信息请关注PHP中文网其他相关文章！