浮动按钮不会进入内联编辑弹出窗口的下方

Question

我有一个表，在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索引为9001。内联编辑器位于tbody标签内。我试图提高tbody元素，table元素，内联编辑器的z-index，让它遍历这些按钮没有任何运气。我要做的唯一一件事是使表格页脚相对定位，并将z索引指定为-1。但这使我的按钮不可点击，因为它们现在在页面“下方”。

有人对如何在内联编辑器下获取这些按钮有任何CSS的建议吗？ （表元素和表页脚div在元素层次结构中处于同一级别）

Answer 1

您可以在页脚中使用display flex css属性来替换float。像这样的东西：

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>

希望能帮助您。