防止绝对孩子扩展父母

Question

所以我有一个具有固定高度和位置相对的父容器，并且在该容器中我想要一个具有绝对位置的子元素，它不会扩展父级的高度。这是我的标记：

<tr class="talent-box-table__row">
<ul class="dropdown-with-arrow" [ngClass]="{'dropdown-with-arrow--open': isTalentHistoryOpen}">
    <li class="dropdown-with-arrow__option talent-box-table__approver">
        <p class="talent-box-table__approver-name">
            userName
        </p>
        <p class="talent-box-table__status">userDecision</p>
    </li>
    <li class="dropdown-with-arrow__option talent-box-table__approver">
        <p class="talent-box-table__approver-name">
            userName
        </p>
        <p class="talent-box-table__status">userDecision</p>
    </li>
    <li class="dropdown-with-arrow__option talent-box-table__approver">
        <p class="talent-box-table__approver-name">
            userName
        </p>
        <p class="talent-box-table__status">userDecision</p>
    </li>
    <li class="dropdown-with-arrow__option talent-box-table__approver">
        <p class="talent-box-table__approver-name">
            userName
        </p>
        <p class="talent-box-table__status">userDecision</p>
    </li>
</ul>
</tr>

我的CSS：

.talent-box-table__row {
  position: relative;
  height: 7rem;
}

.dropdown-with-arrow {
  position: absolute;
  z-index: 10000000;
  top: 50%;
  left: 50%;
  height: 15rem;
  width: 15rem;
}

我的问题是 - 它应该工作，有这样的几行，我的下拉列表应该是上面的一切，但现在它只是扩展父容器高度，尽管它设置为7rem。根据我的理解，绝对定位元素应该脱离自然流动，但看起来它不起作用。这也是我用来检查它的小提琴 - 这里的一切都像它应该的那样：http://jsfiddle.net/ukswqyo0/4/

Answer 1

我的猜测是，你的HTML语法错了。你在你的例子中写道：

<tr><ul>...</ul></tr>

但它应该是

<tr>
  <td><ul>...</ul></td>
</tr>

你的height设置应该在td ...我更新你的小提琴：http://jsfiddle.net/ukswqyo0/16/

见this article