Question

当我使用浮动时，孩子会从父母身上弹出。

我只是将overflow:hidden放在父级上，然后子级弹回其父级。

但是，对于绝对div和相对div，我不能这样做。

.parent {
  position: relative;
  overflow: hidden;
}
.child {
  position: absolute;
}

<div class="parent">
  <div class="child">First</div>
  <div class="child">Second</div>
</div>

目标是将2张图片相互浮动以创建幻灯片，但仍然使页面尊重幻灯片作为项目。

预期：“第一个”在父母内部的“第二个”之上徘徊

行为：隐藏“第一个”和“第二个”，父0px为height。

删除overflow:hidden;后，它们会显示在父级之外。

Answer 1

由于在相关父div中只有绝对div，因此父div中实际上没有内容。您可以为父div设置首选高度，但也需要将html和body height设置为100％。

注意：您可能会将父div设置为要显示的图像大小

我将父母的黑色和儿童的颜色设为红色，以便从视觉上看。

这是你想要达到的目标吗？对不起，如果我错过了解您的问题。

html, body {
	
	height:100%;
	width:100%;
}
.parent {
  position: relative;
  height:50%;
  width:50%;
  background-color:Black;
}
.child {
  position: absolute;
  background-color:red;
  width:20%;
  height:20%;
}

<div class="parent">
 <div class="child">First</div>
 <div class="child">Second</div>
</div>

相对父div内的两个绝对子div被隐藏溢出：隐藏，期望悬停在彼此之上

1 个答案: