父元素未指定高度时，如何将子div定位在父元素正下方？

我希望将一个div定位在父元素的正下方，呈现下拉菜单展开的效果。目前尝试使用right和top属性，但子元素最终会覆盖父元素。如果父元素有指定高度，我可以结合其高度设置top属性（而非示例中的top: 0），但在父元素未指定高度的情况下，是否仍能实现该效果？

原代码示例 #

CSS代码 #

.container {
  width: 350px;
  height: 200px;
}

.parent {
  -moz-appearance: textfield;
  -webkit-appearance: textfield;
  border: 1px solid darkgray;
  box-shadow: 1px 1px 1px 0 lightgray inset;
  font: -moz-field;
  margin-top: 5px;
  padding: 2px 3px;
  width: 120px;
  display: flex;
  align-items: center;
  position: relative;
  direction: rtl;
  float:right;
  background-color: red;
}

.child {
  position: absolute;
  background-color: blue;
  width: 150px;
  height: 200px;
  margin: 3px auto;
  box-sizing: border-box;
  overflow: hidden;
  right: 0;
  top: 0;
}

HTML代码 #

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />

<div class="container">
  <div class="parent">
    <i class="fa fa-calendar"></i>
    <div class="child">
    </div>
  </div>
</div>

解决方案 #

完全可以实现，不需要依赖父元素的固定高度，只需要修改子元素的top属性即可：

修改后的CSS代码 #

.container {
  width: 350px;
  height: 200px;
}

.parent {
  -moz-appearance: textfield;
  -webkit-appearance: textfield;
  border: 1px solid darkgray;
  box-shadow: 1px 1px 1px 0 lightgray inset;
  font: -moz-field;
  margin-top: 5px;
  padding: 2px 3px;
  width: 120px;
  display: flex;
  align-items: center;
  position: relative;
  direction: rtl;
  float:right;
  background-color: red;
}

.child {
  position: absolute;
  background-color: blue;
  width: 150px;
  height: 200px;
  margin: 3px auto;
  box-sizing: border-box;
  overflow: hidden;
  right: 0;
  /* 核心修改：用top:100%替代top:0 */
  top: 100%;
}

关键原理 #

• top: 100%会让子元素的顶部边缘精准对齐父元素的底部边缘，无论父元素高度是由内容撑开还是固定值，这个定位都会自适应生效，彻底避免覆盖问题。
• 如果需要子元素和父元素之间留间隙，可以直接给.child加margin-top: 3px，或者写成top: calc(100% + 3px)，两种方式都能实现间距效果。

内容的提问来源于stack exchange，提问作者pileup