Question

我有一个包含我一直在努力的照片拼贴风格的div。所有照片的父级分为position:relative，而持有照片的div则为position:absolute

我必须使用＆＃39; position：absolute`让孩子们得到我想要的布局，但是当父div（.daddy或.floatcont）没有注册高度时出现问题显得空虚。

如何让父母注册一个高度，以便我可以在页面下面放置内容？

此处代码：http://codepen.io/jeremypbeasley/pen/iBgsp

.floatcont {
  position: relative;
  background: pink;
  width: 90%;
  margin: 5%;
}

.floatpic {
  position: absolute;
  width: 40%;
  margin-bottom: 10vh;
}

Answer 1

绝对定位元素从流中移除，因此被其他元素忽略。因此，您无法根据绝对定位的元素设置父级高度。

在您的情况下，我提出了一个解决方案。更新您的.sixth类，如下所示。

.floatpic.sixth {
  top: 270vh;
  width: 50%;
  z-index: 6;
  position:relative;
}

Updated CodePen

检测位置的高度：相对div与位置：绝对子项

1 个答案: