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

阻止绝对的孩子扩大父母

1 个答案: