Плавающие кнопки не будут go ниже всплывающего окна редактирования

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. Я попытался поднять z-индекс элемента tbody, элемента таблицы, встроенного редактора, но мне не повезло, чтобы он поднялся до go над этими кнопками. Единственное, что я получил, - это расположил нижний колонтитул относительно друг друга и назначил z-index -1. Но это делает мои кнопки неактивными, так как теперь они «под» страницей.

Есть ли у кого-нибудь css советы о том, как расположить эти кнопки под встроенным редактором? (Элемент таблицы и div таблицы-нижнего колонтитула находятся на одном уровне в иерархии элементов)

Answer 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>

Надеюсь вам помочь.