浮动按钮不会位于内联编辑弹出窗口下方答案

【问题标题】：Floated buttons won't go beneath an inline edit popup浮动按钮不会位于内联编辑弹出窗口下方
【发布时间】：2020-02-19 15:41:27
【问题描述】：

我有一张桌子，在tbody 中有一个绝对定位的内联编辑弹出窗口。

我有一个表格页脚，显示 inline-block，其中包含左右浮动的按钮。它看起来像：

<div class="table-footer">
        <div class="new-row-button">
            <lightning-button variant="base" label="New Row" title="Add new row" icon-name="utility:add" onclick={addNewRow}></lightning-button>
        </div>

        <template if:true={changesWereMade}>
            <div class="save-cancel-wrapper">
                <lightning-button variant="brand" label="Ok" title="Make changes" onclick={handleSave}></lightning-button>
                <lightning-button label="Cancel" title="Discard changes" onclick={revertChanges} class="slds-m-left_xx-small"></lightning-button>
            </div>
        </template>
    </div>

结果是我得到了这个：

尽管下拉列表的 z-index 应该是 9001。内联编辑器位于 tbody 标记内。我试图提高 tbody 元素、表格元素、内联编辑器的 z-index，但没有运气让它越过这些按钮。我唯一要做的就是使表格页脚相对定位并分配-1的z-index。但这使我的按钮无法点击，因为它们现在位于页面“下方”。

有人对如何将这些按钮置于内联编辑器下方有任何 CSS 建议吗？（table元素和table-footer div在元素层次结构中处于同一级别）

【问题讨论】：

增加下拉包装的z-index

标签： html css css-float

【解决方案1】：

您可以为您的页脚使用 display flex css 属性来替换浮动。像这样：

footer {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

footer .button {
  flex: 1;
}

footer .button:first-of-type {
  align-self:start;
}

footer .button:last-of-type {
  align-self:end;
}

<footer>
  <button> Add me </button>
  <button> Delete me </button>
</footer>

希望能帮到你。

【讨论】：